mobile-man

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 http://bradpotter.com/themes/genesis20/

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!

RELATED
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

BradPotter.com is Powered by 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!

Comments

  1. Lynnita says

    Thank you, thank you! This is exactly what I was looking for, and it worked like a charm. Your tutorials are clear and straightforward to follow. Brilliant.

  2. says

    Thanks Brad. Great Tutorial. I have been stumped on Mobile navigation for Genesis for a while. i was hacking Twitter bootstrap navigation into Genesis but there were lots of issues getting it to display properly on some devices.

    I will keep in touch to hear about your plugin.

    Thanks – Seb

  3. says

    Hi, is there anyway to change the name that appears in the nav bar? By default it says ‘Primary Navigation’. How could I change the words without breaking the whole system you built? I am relatively new to php.

      • Brad Potter says

        For this tutorial I meant that to say “HEADER MENU”

        You can change that name in the CSS:
        content: ‘PRIMARY MENU \2630′;

        should be

        content: ‘HEADER MENU \2630′;

        which I have fixed. You can use any name you want in the CSS.

  4. says

    Hi Brad,

    I used this tutorial on one of my sites and it worked great. Thanks for taking the time to put the code together.. I was wracking my brain trying to create a mobile responsive menu and your tutorial and code worked perfectly. I wish Genesis made your menu as standard in their themes.. Your responsive menu is so much prettier than their default code.

    Thanks Again.
    William

  5. says

    Hello Brad,
    Is it possible to have a logo on the Nav menu (custom) by the hamburger icon? Or have the hamburger icon to the right?

    • Brad Potter says

      Sure, try text-align: right; on the #header-menu-icon or use a background graphic for a logo

  6. Len says

    Awesome stuff Brad! Experimenting with this now. Question, if I wanted to implement this for all 3 Genesis menus – Primary / Secondary / Header – and considering I am javascript illiterate can all of this be combined into one js file rather than calling 3 different js files?

    • Brad Potter says

      Thank you!

      I’m no JavaScript expert by any means but maybe something like this will work. Can you give it a try and let me know?

      https://gist.github.com/bradpotter/6664623

      If you name the new file responsivemenus.js like my example file, make sure you use that name in “Step 3 – Enqueue the Script” accordingly.

      Also you may want to try and combine the styles to cut down some of the CSS or keep separate if you are styling them differently.

  7. says

    Brad,

    Great tutorial, many thanks for taking the time to put it together. I had spent hours trying to get a different one to work, if only I found this one faster!

    On to solve whatever the next issue is that crops up!

    Cheers

  8. Lucas Lemonnier says

    “I am experimenting with 3 different options that allow you to collapse sub items in order to address that issue. Stay Tuned!”

    The anticipation is killing me! Thanks for all your hard work :)

    • Brad Potter says

      Thanks Lucas,

      I have a full-time job independent of my WordPress/Genesis work and it has kept me very busy lately. I’m hoping to make more progress on collapsable sub items in a responsive menu in late Oct or early Nov. Wish I had more time :-)

  9. Terence says

    PHP Version: 5.3.27
    WordPress Version: 3.7-beta2-25760
    Genesis Version: 2.0.1
    Child Theme Version: Genesis Sample Theme 2.0.1
    Genesis Extender Version: 1.2.3

    Hi Brad,

    First let me add my thanks for a really cool and well written tutorial. But not only that, the result is absolutely first rate too. I can’t begin to imagine what Sony must have paid for their site’s mobile-first menu, and you gave it to us for free. Awesome!

    Just a quick heads up ~ there seems to be an issue with the coming 3.7.

    I have installed your Header Navigation Menu and the Primary Navigation alternative on two different instances of 3.6.1, but on this configuration I am having a problem.

    I installed the Header Navigation Menu alternative and the whole menu structure with all the menu items fires at once, as soon as it passes 768px.

    Terence.

    • Brad Potter says

      Thanks Terence,

      I’ll give 3.7 beta a try and see what happens on my end.

      Do you have HTML5 enabled on your child theme in that install? Also I have never tried using Genesis Extender with this. Is that something you can disable to verify it has no effect?