3 ms·

I would love to hear more about how you did this: collapse the navbar into a slidedown "hamburger" menu. Can you point me to any resources for doing it? Thank

• misterbwong 12y ago
  I'm not grandparent but usually people have a hidden nav that shows on smaller screens using media queries
• dmdeller 12y ago
  Check out Bootstrap's 'Default navbar' example. It does this. http://getbootstrap.com/components/#navbar-default http://getbootstrap.com/components/#navbar-default
• neovive 12y ago
  Sure. In the default desktop page, the navigation menu is a traditional horizontal navbar (a styled unordered list). * When the media query for mobile devices is triggered, the mobile.css is loaded which, among other things mentioned above, hides the navbar and overrides the previous styling in the embedded list with: .navlist li { display: block; margin: 15px 0; text-align: center;}. The new CSS changes the layout of the navlist to a centered, vertical list. * Another div with an id of #mobilemenu (hidden by default in the desktop css) is absolutely positioned in the top right corner of the page. That div contains a small hamburger menu png icon. * jQuery is used to capture the click event and toggle the mobile navigation menu: $("#mobilemenu").click(function () { $(".navlist").slideToggle(500); });