Menu

Place Hamburger Menu in Header

This post introduces re-positioning the Dynamik Vertical Toggle Menu button to the Genesis header area. When the hamburger button is clicked the menu opens and expands just under the header.

In order to do this requires one line of jQuery to move the Navigation button to the Header area. And the accompanying CSS to position the Logo and navigation button.

There are several caveats in using this technique.

To use this technique you must select Vertical Toggle as mobile menu. Genesis > Dynamik Design > Responsive

The Logo must be small enough to fit with the hamburger menu. This means your logo needs to be around 225 pixels wide or less

Using the Genesis Header Right widget area for anything other than Hamburger icon will require custom coding. In most cases on a mobile view there’s not much room for anything other more than menu button. If you have other stuff in header right area I would recommend doing a display:none; At the appropriate responsive media query to hide anything else you place there.

If you want the Vertical Toggle menu to take effect before the 6th media query, you would need to copy the CSS used for the Toggle menu to the 3rd media query.

Here’s the jQuery, This moves the hamburger menu code to the .site-header
This goes in to: Genesis > Dynamik Custom > JS