How to Create Mobile Responsive Navigation: The Toggle


Responsive navigation comes in many forms. Brad Frost has, on a couple of occasions, covered the various different mobile navigation patterns. While there is no single correct answer to mobile responsive navigation, the best answer almost always depends on the context. In todays article, we’ll delve into how to create a toggle menu, as well cover situations where the toggle is optimal.

Mobile readers, or more astute desktop readers, may have noticed that the toggle is the mobile nav of choice here on CSSForge (and has been since v1).

Getting Started

First, we’ll need to download a couple of required files. jQuery Dropdown from Cory LaViska is a Bootstrap-inspired jQuery plugin that removes some dependencies and makes a few adjustments to optimize for the mobile experience.

Once you’ve downloaded the jQuery Dropdown plugin, place it in your WordPress theme directory and load it after the jQuery library in the head section of your site.

Mobble is a lightweight WordPress plugin that adds conditionals to detect a variety of mobile devices and tablets. Some purists may disagree with this approach, arguing that an additional plugin will outweigh the benefits of requiring the user to download only the correct navigation menu. The idea, though, is to get into the practice of using conditionals to serve only the relevant HTML, rather than using strictly media queries with display: none;. This approach can save mobile visitors a lot of load time, especially when it comes to conditionally loading sidebars, which often have a lot of images and advertisements.


Once you’ve installed and activated Mobble, place this code in your header.php file.

Let’s take a look at what the above code does. On line 1, we’re using the Mobble-introduced conditional to tell the server if the device requesting the page is not a mobile device, then deliver the standard WordPress navigation menu; found on lines 3-5.

On line 7, we introduce the else statement, which tells the server to deliver our mobile navigation menu to all visitors that are on mobile devices.

Also take note of what we’re doing on line 11, with the data-dropdown attribute. This attribute is defining the ID of the section where the dropdown menu exists, so that our jquery.dropdown.js plugin can find it.


The required CSS here is pretty simple, and is included in the jQuery Dropdown zip file. Most of the changes here will be personal preference, aesthetic changes.

Where should you use the toggle?

The toggle is an attractive, easy-to-implement solution to most mobile navigation needs. Whether on a blog or a corporate website, it can be a clean and professional-looking way to serve up navigation to mobile users.

In my opinion, the toggle shines most on sites with less than 12-15 menu items. Beyond that, it’s best to look into some of the other options, such as the select or the nav left flyout.

Jon Bellah

Jon is the lead developer at Duncan/Day and a pixel peddler at Lucid Theme. When he isn't obsessing over code, Jon enjoys cycling, beer league hockey, and plotting world domination. You can find Jon on Twitter at @JonBellah and Google+.

13 thoughts on “How to Create Mobile Responsive Navigation: The Toggle

  1. Hi, Jon

    I use StudioPress mostly and I’m trying to get The Toggle to work but can’t figure out how to place the jQuery Dropdown plugin in the StudioPress Metro theme directory per your instructions. I’ve downloaded it; but, it appears to be in individual pieces. Can you clarify, please, how to accomplish that?

    Much thanks and appreciation,
    Doug in Mansfield, MA

    • Doug,

      You can place the dropdown.js file in the themes /js/ folder. Then in your functions.php file, you can add:

      function enqueue_dropdown_script() {
      wp_enqueue_script( ‘dropdownjs’, get_stylesheet_directory_uri() . ‘/js/jquery.dropdown.js’ );
      add_action( ‘wp_enqueue_scripts’, ‘enqueue_dropdown_script’, 20);

        • To add it to your header in Genesis, you’ll want to add the code as a function and hook it into the theme.

          You can either hook it after the header and then position: absolute; it where you want it or you can replace the entire header (which I have an article about here: http://www.cssforge.com/2012/12/genesis-custom-header-for-multiple-page-layouts-and-templates/ )

          To hook the code into the theme, without replacing the header, you can do this:

          function add_dropdown_header_code() { ?>
          // Add the menu code here
          < ?php }
          add_action( 'genesis_after_header', 'add_dropdown_header_code' );

          (remove the space between the < and the ? in < ?php. Disqus was parsing it out)

          • Jon,

            (This Disqus Forum is stripping out code making it impossible to get this right.)


            When I code that in Dreamweaver, it give me the error:

            There is a syntax error in line 3. Code hinting may not work until you fix this error.

            Here’s what I coded per your last direction:

            function add_dropdown_header_code() { ?>

            // Add the menu code here

            <?php }

            add_action( 'genesis_after_header', 'add_dropdown_header_code' );

            I do NOT want to replace the header.

            Please advise and thank you,

          • You need to replace “// Add the menu code here” with the actual menu code from the post above. Also, see my edit to my previous comment with the updated code.

          • Jon,

            My site crashed. I apologize; I can’t get this to work. I am not a php person. Ready to give up.


          • Jon,

            Trying to resolve this via Disqus is really frustrating; Disqus is not the proper forum to do this. Can we try this via email?

            Thank you, Doug

          • Haha, no it’s not exactly ideal for code… but, I love it for pretty much everything else. It’s a trade-off.

          • Jon,

            This isn’t working for me. Thank you anyway. I’ll have to try something else. It would have been nice; but, it’s fighting me every step of the way. No fun.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>