If you're looking for an inherently responsive menu, you can use one of our responsive menu-bar elements. But if you're looking for a mobile-only menu, the
.menu-bar-mobile element is a solid, alternate solution.
So what the heck is the difference between responsive and mobile? — When we say "responsive" we mean the element will work at any viewport, adjusting to fit itself. But when we say "mobile" we mean the element is intended for the mobile view only.
To create a mobile menu-bar, add class
mobile-menu-bar to an unordered list, and nest any submenus within. Make sure to add class
menu-btn to all links within.
.mobile-menu-bar element. You would need to do this in your own website after including jQuery.
Below is a basic example that shows how the examples in this demo page were setup. We simply bind the
FrontStreetMobileMenu() method to our
.mobile-menu-bar elements with jQuery.
For example, in our Jump Start WordPress Theme, we use this mobile navigation element, which is completely separate from the primary navigation the desktop user sees. However, for SEO purposes it would be better not to have a complete duplicate of the entire site's primary navigation.
.mobile-menu-bar element (which didn't originally exist on the DOM on page load).