Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Laura Cressman
Laura Cressman
12,548 Points
Posted by Laura Cressman
Laura Cressman
12,548 Points

Fix the (at least) 3 bugs of my CodePen?

Hi everyone, I'm experimenting with making a mobile drop down menu, but as an unordered list instead of a select element. Here is a link to my CodePen: http://codepen.io/anon/pen/qevgh

The three bugs I notice are: 1) When the screen is wider than the mobile one (so the menu list item isn't displayed), the other 4 list items do not appear to be horizontally centered in the navigation bar, even after I set the last list item's display to none.

2) When I shrink the browser width, the navigation bar seems taller than it should be, especially since the other list items now have a display of none.

3) When I click on the Menu link, then click on it again (so revealing and then hiding the navigation links), and widen the browser width past the breakpoint, now all of the list items are gone. I realize this is because the toggle hid them after I clicked Menu twice, but how can I prevent this once the browser is widened?

I know this is a challenge, so any help would be appreciated! Smile, Laura:)

6 Answers

Colin McGraw
Colin McGraw
15,337 Points
Colin McGraw
Colin McGraw
15,337 Points

I think you could make things a little easier on yourself structuring the markup differently, and using slideToggle() on the unordered list rather than each list item.

Codepen example

As for the bugs -

  1. The universal * selector is not specific enough to override the default styles browsers apply to lists. Setting margin: 0; on the ul element takes care of it.
  2. I believe the height issue was because of the fixed height on the outer #nav. If you let it default to its auto height, and instead give the menu items (and menu toggle) a padding/height/line-height that'd take care of it.
  3. If you use a min-width media query you make sure your menu gets set to display: block; when the viewport expands back out.

Hope that helps! I left a few comments to note what's changed in the forked version of your pen.

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Thanks, man, I learned a bit from your forked version! (i.e., I hadn't really used/known-how-to-use the "important" keyword before).

Cheers!

Colin McGraw
Colin McGraw
15,337 Points
Colin McGraw
Colin McGraw
15,337 Points

Nice! Definitely better without the #menu anchor moving around.

Also if you don't want your mobile menu nudging other elements around when it's toggled, you can adjust positioning like in this example.

This also lets you use other toggle methods without it looking odd and clunky.

Jack Fitzgibbon
Jack Fitzgibbon
7,607 Points
Jack Fitzgibbon
Jack Fitzgibbon
7,607 Points

Laura Cressman, I know you have solved all of your bugs, but I would take a completely different approach to a responsive navigation bar. Go watch the tutorial over at Phpacademy, also look at my CodePen, I've made a few tweaks, i.e adding a menu symbol etc.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jack,

Good demo.

If I may make a suggestion -

You could create your hamburger icon in css. This way you don't clutter up your html with elements that are only there as css hooks. Separating content from presentation. I should say, I know you're creating the icon in css but you're using extra html elements to help you get there.

Here's some ideas to help you do that: http://css-tricks.com/three-line-menu-navicon/

Since you have rounded corners, you may have to go with the image or icon font technique.

Also, it might be more semantic to have your menu text in an <a> element rather than a paragraph.

You can update your click handler to prevent the default action of a link so that your url won't update with a hash.

$('.handle').on('click', function(event){
        event.preventDefault();
    $('nav ul').toggleClass('showing');
});
Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Well, this is what I have so far:

1) Your #nav padding needs to be set to 0 because lists automatically have padding set to them, which makes them indent. 2) In your media query, the #nav, if not given a height, displays the same height as when the screen is bigger than the media query.

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

I like what Colin McGraw did! I added a bit of what I think looks cool that I think you might have wanted to be the case, just adding on to his great work (just changing a tiny bit on the #menu CSS):

#menu {
  width: 100%;
  display: none;
  text-decoration: none;
  color: white;
}

And I moved the #menu anchor above the ul list, so that it remains at the top when the slideToggle() function is called. Not sure if you like this, but there it is. :)

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Great work Colin and Adam! You solved all of the bugs, and it was good to learn how to handle this. My only remaining question would be your thoughts on the use of "!important", as I've heard that we should use that as little as possible. Could you refactor the code to not use it, or is the important completely necessary? Thanks again :)