Mobile Menu
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.
Basic Example
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.
In cases where the sub-level menu have more items than the top-level, the overall height of the block will be adjusted with JavaScript so that everything fits.
Colors
Similarly to the responsive menu-bar element, you can add color classes to your .mobile-navar element, along with classes text-dark or text-light to adjust the color of text.
Required JavaScript
By default, Front Street does not invoke any JavaScript to enable your .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.
$('.mobile-menu-bar').frontstreet('mobile-menu');
Why not invoke the JavaScript by default? — With an element like the mobile menu, we don't want to assume it exists on the intial page load.
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.
So instead of outputting two large duplicate menus, we generate the mobile version with JavaScript when the page loads, by copying the site's main navigation and some other elements on the page. Then after that's constructed, we then invoke the JavaScript needed for our .mobile-menu-bar element (which didn't originally exist on the DOM on page load).