Do you need to add a fullscreen responsive menu in WordPress?
When your users click or tap a hamburger icon, a fullscreen overlay of your website’s menu will be displayed using a beautiful animation.
In this article, we will show you how to add a fullscreen responsive menu in WordPress without writing any code.
Why Add a Fullscreen Responsive Menu in WordPress?
Well designed menus help your visitors find their way around your WordPress website. But it can be difficult to tap on a standard menu while using the small screen of a smartphone.
Mobile users have already surpassed desktop users for a lot of websites. That’s why we recommend that you preview the mobile version of your WordPress site to see how your website looks on mobile devices.
A fullscreen responsive menu will automatically adjust to different screen sizes. Since all of the available space is used for the menu, it is easier to navigate on smartphones and tablets.
Let’s take a look at how to add a fullscreen responsive menu in WordPress.
How to Add a Fullscreen Responsive Menu in WordPress
The first thing you need to do is install and activate the FullScreen Menu – Mobile Friendly and Responsive plugin. You can check our step by step guide on how to install a WordPress plugin for more details.
Upon activation, you should head over to the Fullscreen Menu Options page in your WordPress admin menu to configure the plugin settings. It will take you to the ‘Settings’ tab automatically.
Get started by checking the ‘Activate Animated Fullscreen Menu’ checkbox to enable the menu.
It’s a good idea to also check the ‘Show the menu only for Admin users’ box at first. This will let you see the changes as you configure the menu, but visitors to your site will not be able to see it until you are finished.
Don’t forget to come back and uncheck that box when you’re done.
Other settings let you show the menu only on mobile devices, close the menu on a click or scroll, and hide the menu on specific pages. For our example, we’ll leave these settings unchecked, but feel free to customize it as you wish for your own site.
Fullscreen Menu Design and Appearance
Next, we’ll customize the design of the menu. To do that, you’ll need to click on the ‘Design/Appearance’ tab at the top of the page. On this page, you can choose the colors, font, and animation settings for your menu.
At the top of the page, you will notice two color settings. The first color is for the hamburger menu icon. This will be displayed in the top right corner of your website. When your visitors click or tap it, the fullscreen menu will be shown or hidden.
The second color setting is for the menu’s background.
When you click on each box, a color palette will appear. You can either click on the color you wish to use or type its hex code.
After choosing the menu colors, you should scroll down the page to the Font/Appearance section. Here you can choose the font color, family and size that will be used for the menu text.
For this tutorial, we’ll stay with the default settings which use the font from our theme. We recommend this setting because it will match the design of your website. Also, loading additional fonts could affect your WordPress site performance and speed.
There are also settings to display a lateral side menu on specific pages, and scroll the main menu if it’s not tall enough. For this tutorial, we’ll leave those settings unchecked, but feel free to experiment with them on your own site.
After that, you’ll need to scroll down to the ‘Animation Settings’ section. There are two main settings that you can adjust.
The first of these is ‘Animation Type’. This lets you select the animation direction when the menu is activated. You can choose from top to bottom, left to right, and right to left.
The second setting is the effect you get when hovering the mouse over a menu entry. The choices are padding line, background color, and background color with a rounded border.
Fullscreen Menu Content
Finally, you’ll need to scroll back to the top of the page and click the ‘Menu Content’ tab. Here you can select the WordPress menu that will be displayed on your fullscreen menu.
Next to ‘Select Menu’ at the top, you’ll need to choose a menu from the drop down list. If you have not created a navigation menu yet, then check out our guide on how to add navigation menus in WordPress.
If you would like additional content displayed on the menu screen, then you can add it in the next section, labeled ‘Free HTML / Shortcodes’. Simply type your content into the editor box and add any media files you would like. This content will be displayed underneath the menu.
Next, you might like to add social icons. These will be displayed in a row at the bottom of your fullscreen menu.
To add them, simply scroll down to the ‘Social Icons’ section and enter a title for the icon, such as ‘Facebook’. After that, choose the appropriate icon and type the URL to your social page.
You can add more icons by clicking the ‘Add Another Icon’ button.
Finally, you can add a native WordPress search bar to the top of your responsive menu. You’ll need to scroll to the bottom of the ‘Menu Content’ page and check the ‘Add Search Bar?’ box. If you like, you can also type some placeholder text.
Lastly, click the ‘Save Changes’ button to store your settings.
You can now visit your website to see the fullscreen responsive menu in action. We recommend that you resize your browser to see how the menu behaves on different screen sizes.
Here’s how it looks on our demo website.
Once you are happy with your fullscreen menu, don’t forget to navigate back to Fullscreen Menu Options and uncheck ‘Show the menu only for Admin users’. After you click the ‘Save Changes’ button, visitors to your website will be able to access the menu.
We hope this article helped you learn how to add a fullscreen responsive menu to your WordPress site. You may also want to learn how to embed a Facebook video, or check out our list of the best contact form plugins for WordPress.