A common practice is to have the menu change to a burger menu icon when the screen is smaller than a certain pixel size, say 768px. Many times it is good practice to have this menu icon fixed so that it is always in view on a mobile devices. When the burger menu icon is pressed, the primary menu slides into view. Most sites have it slide from the top but a growing number are having this slide in from the side. This is a quick post to discuss adding this to a WordPress site.
This would add css:
Alter page position declaration, add z-index
Alter menu css to add burger and position vertically.
This would add JavaScript to add events when the burger menu is touched, and add classes to menu and page to use css animations to move over.
To do this from scratch, this page has a great tutorial on getting started with what css and javascript additions we would need to make:
http://apeatling.com/building-smooth-sliding-mobile-menu/
Otherwise there seems to be a great plugin already made for such a menu:
https://wordpress.org/plugins/wp-responsive-menu/ by MagniGenie.
Most plugins make you have their css and javascript assets loaded on every page, but in this case, since the functionality will probably exist on every page on your website, this is not too much of an issue. After installing it in a test environment, it loads jquery.transit.min.js, jquery.sidr.js, and wprmenu.js. It also adds a stylesheet and a font stylesheet (the font stylesheet is loaded from google).
The basic version seems to have most of the features and configuration possibilities necessary for most websites. The Pro version adds more abilities to change the icons and add a social media bar with buttons. It’s only $15 for lifetime updates.
This plugin adds a div containing the markup for the menu you selected. It does not alter your primary or secondary nav markup on the page or change their css styles. It shows the added div fixed on the top after the screen width gets to a breakpoint of your choice. One thing you will have to add to the “Elements to hide in mobile” field of the configuration is your css class for your existing menu. Otherwise, you will have two menus showing on mobile. Another way would be to add css to your style sheet.
For example, the default breakpoint in the WP-Responsive-Menu settings is 768px. In our test we chose the primary nav to be the WP-Resonsive-Menu, so we could use the following css to hide it when the WP-Responsive-Menu appeared.
@media screen and (max-width: 768px) {
.nav-primary {
display: none;
}
}
While it would be fun to code our own solution for a sliding menu, a plugin that has been tested by thousands of users sounds more robust and compatible.
