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

Design

Prakhar Patwa
Prakhar Patwa
11,260 Points

how to hide bootstrap hamburger if simply user click anywhere on the screen (no href link)

I am using bootstrap it is working good. I have noticed for example - you are on home page and you wish to go to the different page so you will click on the hamburger menu and suddenly user changes his mind and to stay remain on the home page.Then after user dont click on the hamburger menu option to hide it and click on the page (no href link).So menu is not hiding automatically? What should i do to hide the hamburger menu options in this way?

2 Answers

Tim Knight
Tim Knight
28,888 Points

Prakhar,

If the user clicks on the hamburger icon again it should toggle closed by default with Bootstrap. That would be the expected behavior. I haven't observed users tapping on blank spaces to close menus like they do on a desktop interface with a mouse. The toggle should be enough for the average person. If that doesn't work for you though you'll want to use jQuery or JavaScript to add an overlay div that shows behind the menu while it's open, that if clicked on would call the menu's hide function. This could be weird though because if someone does leave the menu open and then goes to click on a link on the page, it wouldn't do anything because that click would be closing the menu instead of going to the link's target.