Note: If you are looking to create a responsive mobile menu from the Primary Navigation Menu, jump on over here. If you are looking to create a responsive mobile menu from the Secondary Navigation Menu, jump on over here.

In my last tutorial on responsive mobile navigation menus I explained how to register a new navigation area for your Genesis 2.0 Child Theme and dedicate it as your Mobile Navigation Menu. Several people have contacted me wanting their Header Navigation to become Mobile friendly as the browser is collapsed or when viewed on mobile devices. While similar to my first tutorial, fewer steps are needed since we are using an existing Navigation.

It’s extremely important to use a good text editor. On the Mac I use the free TextWrangler editor by BareBones Software. Windows users may try the built-in Notepad or opt for free third party software like Notepad++.

Make absolutely sure you have made a backup of your style sheet and your entire theme for that matter. This first step involves a little bit of CSS surgery by adding some CSS code to the existing style sheet that came with your child theme.

Step 1 – Modify the Style Sheet

Since we are using Genesis Sample Theme, change the “@media only screen and (max-width: 767px)” query in the style sheet to “@media only screen and (max-width: 768px)” You are just changing the number from 767 to 768.

Click “view raw” in lower right of the box below. Copy/paste the CSS snippet into your child theme’s style.css file within the @media only screen and (max-width: 768px) query area. It is important that the new CSS follows the existing CSS within that area. Make sure it is placed before the last closing curly bracket “}” within that media query. Get this part wrong and everything will look funky so have that backup handy.

You can change the text “HEADER MENU \2630″ in the three locations of the CSS snippet to whatever you prefer. You may even opt to use a graphic instead of text. If nothing looks broken we can move forward. If the styling of your menu looks really bad at mobile widths or something is obviously out of place go back and make adjustments to eliminate any issues as going further will only complicate any problems by adding additional variables into the mix.

Step 2 – JavaScript Makes it Happen

Create a folder named “js” using all lowercase letters. Using your text editor, create a blank file named “headermenu.js”. Use all lowercase letters and no spaces or hyphens in the name of this file. Paste the code snippet below within the headermenu.js file and save. Place the headermenu.js file within the js folder and upload that folder to the root of your child theme.

Click “view raw” in lower right. Copy/paste the code into the headermenu.js file.

Step 3 – Enqueue the Script

We are now going to enqueue the headermenu.js script so that your child theme can take advantage of it. Open up your functions file within your child theme and paste the following code within that file. Usually it is safe to paste below any existing code within that file.

Click “view raw” in lower right. Copy/paste the code below into your child theme’s function file.

Step 4 – Get the Menu Name Right

Go to the administrative area of WordPress under Appearance > Menus and make sure the menu you wish to use in the Header Navigation Menu location is named “Header Navigation”. This is very important because the JavaScript file is looking for that specific name.

You’re Done!

Refresh your site and you should have a fully functioning Header Navigation Menu that transforms into a mobile friendly menu when viewing with small browser widths or mobile devices. The Header Navigation menu should behave similar to what you see here

Final Notes

What if I wanted to do this to the Primary or Secondary Navigation Menu instead? There’s a tutorial for that. Check the links below.

I am getting a lot of requests to create a Mobile Navigation Menu plugin for Genesis and it is something I am working on. However, I wanted to first empower you to implement a Mobile Navigation solution that best fits your theme design and layout. It would take a fairly complicated plugin (that may or may not be maintained) to solve everyone’s needs.

Sometimes a website may have a Header Navigation Menu with a lot of sub menu items which can cause the menu to be rather tall. I am experimenting with 3 different options that allow you to collapse sub items in order to address that issue. Stay Tuned!

Create a Responsive Mobile Menu for the Genesis Framework
Create a Responsive Mobile Menu from the Primary Navigation Menu
Create a Responsive Mobile Menu from the Secondary Navigation Menu is Powered the Genesis Framework

Genesis Framework for WordPress

The Genesis Framework by StudioPress empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and choose from a selection of great looking premade designs. Start using the Genesis Framework!