Have you seen the full screen responsive menus being used on popular blogs? These menu appear on the site with a default hamburger icon. When a user clicks or taps on it, a fullscreen overlay containing the site menu appears with a beautiful effect. In this article, we will show you how to add a fullscreen responsive menu in WordPress without writing any code.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
First thing you need to do is install and activate the DC Fullscreen Responsive Menu plugin. Upon activation, you need to visit Appearance » DC Fullscreen Menu page to configure the plugin settings.
You 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.
After that, you need to select the direction of the slide-in effect for the fullscreen menu. You can choose from top, right, left, bottom, or no effect.
DC Fullscreen Responsive menu allows you to choose a background and text color for the menu as well. Make sure that you choose a combination that is easy on eyes and matches your color scheme.
When choosing the text or background color, always consider how these colors affect readability.
You can choose a Google font for the menu text. Simply enter the font name, and the plugin will load it for you.
Don’t forget to uncheck the box next to the option ‘Tiny link to Author’. If left checked, it will add a link back to the plugin author’s website on all your pages.
Lastly, click on the Submit button to store your settings. You can now visit your website to see the menu in action. We would recommend you to resize your browser to see how the menu behaves on different screen sizes.
Beginning Wordpress Site 