Hamburger Menu Demo

This is a demo of the navigation menu with the hamburger menu option enabled, as generated by the Navigation Menu Wizard. On a desktop computer or on any screen with sufficient width, the normal navigation menu will be shown. On a mobile phone or other small screen device, the code will collapse the menu, leaving behind a hamburger menu button. Clicking (or touching, for touch screens) the button will expand the menu.

You can try out this effect even if you are on a desktop computer by shrinking this window so that it is smaller than 630 pixels. (Note that 630 pixels is just the number that I chose for this demo. You can always select a different threshold in the Wizard.)

The hamburger menu option is useful if your side column comes first in the HTML of your web page, and you don't want to use flex box to shift the columsn around on mobile devices. If your site already has a mobile-friendly layout that automatically puts the menu at the bottom of the screen on mobile phones, such as that generated by the Layout Wizard, you won't need this.

If you are wondering how to put your logo (or even text, for that matter) next to your button, see the tutorial on How to Put Text Next to an Image and Centre ("Center") Both on a Web Page (HTML/CSS).