Mainstreethost Web Design & Development Mainstreethost Web Design & Development

How to Configure ShiftNav on Responsive WordPress Sites

Reading Time:1 mins August 7, 2014

This effect is a nice alternative to the mobile-select style menus. You can see it in action on Belvedere Podiatry or 800 Maple when you re-size your window beneath 760px.

It’s pretty easy to configure:

  1. Install ShiftNav.
  2. Create a WordPress menu for the mobile nav & add pages.
  3. Under menu settings/locations, check the box for ShiftNav to assign this menu as your mobile navigation (pictured below).
  4. Go to Appearance/ShiftNav to finish the rest of the configuration:

A) Add toggle breakpoint of whatever pixel width the menu should appear at.
B) Under ‘hide theme menu‘ add your normal menu’s ID or class to automatically set it to display: none when ShiftNav appears. This is a great feature that means you don’t even have to worry about the menu in your responsive CSS.
C) Under Toggle Content you can add text that appears on the menu button.
D) Edit colors/fonts if necessary.

And that’s it. If you have any questions about this or need a better example, just let me know.

Topics In This Post:

Web Design with a Purpose. SEO Backed Web Design Services Get Started

About The Author: Mark Nosowicz

Mark Nosowicz is a Senior Web Developer at Mainstreethost, with many years of experience crafting websites for businesses nationwide.

Leave a Reply

Your email address will not be published.