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

Dean Conway
Dean Conway
3,301 Points
Posted by Dean Conway
Dean Conway
3,301 Points

My menu overlay close button is broken.

At the moment I am working on a full screen menu overlay which will kick in at smaller screen sizes for mobile and tablet users, but the trouble I am having at the moment is that I don't know how to instruct the javascript to close the menu when I click on the 'X', however I have successfully got the menu to open when I click on the hamburger icon, some javascript which was kindly posted by another forum member.

Also the background of the dark grey-to black gradient which I have set on the ."nav-primary" class is not coming through either.

Here is a link to my codepen:

http://codepen.io/Consecca/pen/pgXmOd

Any suggestions would be much appreciated.

  • Dean

3 Answers

akak
akak
29,445 Points
akak
akak
29,445 Points

It's not a JS problem. Your navigation div is showing up over the button and that's why after it shows up the close button doesn't work. You need to tweak styles. Cheers!

.nav-open .nav-primary {
margin-top: 50px;  /* after adding margin the button is working */
opacity: 1;
visibility: visible;
}
Dean Conway
Dean Conway
3,301 Points
Dean Conway
Dean Conway
3,301 Points

Cheers for that akak, that worked a treat, but in the end that suggestion lead me to putting a higher z-index on the header element instead of the margin top so that the menu would still take up the full screen top to bottom but not at the expense of blocking off the menu trigger.

I have updated the code pen with these changes, but now I want to get rid of the scroll bar when in menu mode as it's redundant, but I want this to happen as a cover up, in other words I want this to gracefully disappear while avoiding any screen jerking when this happens.

akak
akak
29,445 Points
akak
akak
29,445 Points

Unfortunately it's not an easy task. Here are some guidelines: http://stackoverflow.com/questions/30892521/how-can-i-hide-a-scrollbar-smoothly

Dean Conway
Dean Conway
3,301 Points
Dean Conway
Dean Conway
3,301 Points

ok thanks akak, hmm I might leave that for now then, as getting that to work seems a bit of a ball ache than its actually worth, might come back to that at a later date.

In the mean time, I have updated my code pen with the latest changes but now I want to display the navigation menu as a horizontal list when there is enough room at wider screen sizes, inside the black header but aligned on the far right, How would I achieve this with the flex box method?