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:
- Install ShiftNav.
- Create a WordPress menu for the mobile nav & add pages.
- Under menu settings/locations, check the box for ShiftNav to assign this menu as your mobile navigation (pictured below).
- 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.
