free tuts

There are many methods of replacing normal navigation menu used on desktops with mobile menu–which is usually just a button with sliding panel containing vertical menu. Here is a method I prefer to use. You see on the screenshot above how same menu looks on desktop and iPhone screens.

First, we naturally need to register menu in functions.php. Next, we add menu (theme location) to template file. Next, we add a few lines of javascript and style both menus.

Step 1, register menu in functions.php:

You should insert your own prefix for this function.

Step 2, add theme location to template files:

I usually create separate file for header elements like logo, menu and similar things, “subheader.php”. You may put the code into header.php itself or also create a template part—up to you.

In code above you see two html pieces while theme_location “main-nav” is placed into both.

Step 3, add javascript for smooth sliding of the panel with menu items for mobiles:

Add these lines of code to some js file (where basically you’d put all script calls). Code below concerns only mobile menu—actually, the panel that slides and contains main menu.

Step 4, style both menus in styles.css as you wish. However, a few things to be minded. To hide the panel until it is clicked by user add display:none to #sliding-panel (or entitle it as you wish):

Now, you also need to hide a button from desktops but show it on mobiles. And vice versa—you need to hide normal menu but show the button on mobile devices. To do that, we just add a few styles using media-queries: