Earlier we have discussed about various plugins that allows you to create mobile navigation that automatically shows up on small screen devices like smartphones, tablets etc. Read: Adding responsive mobile menus and Best WordPress plugin to create responsive mobile menus.
Most mobile navigation menus slides up from the side or pushes the web page to right or lest and then shows up menu items.
In this lesson you will learn how to create a full screen mobile menu in a responsive layout.
Mobile Navigation is the new WordPress plugin that provides you a full screen responsive menu with useful customization options.
Full screen mobile menu increases focus on your menu items and shows them in full width without cutting any item on sides. It shows up as soon the menu icon is clicked and goes away when re-clicked.
Start by installing ‘Mobile Navigation’ plugin in WordPress
Upon activation visit your admin area dashboard Settings -> Mobile Navigation and choose a menu location. Other options allows you to:
- Set mobile breakpoint
- Set background color
- Adjust text brightness
- Set logo as text or image
- Set logo and menu font family
- Disable navigation, menu location, CSS, javascript
- Hide menu on scroll, on or off
- Use custom CSS classes
When you’re done with options, click ‘Save Changes’ button and that’s it.
If you don’t want HTML to go through the action wp_footer: Place this somewhere after the beginning of your body-tag: <?php do_action('mn_nav'); ?>. As suggested by the developer, this might be better for readability and perhaps SEO.