Skip to Main Content

How to add a full-screen and responsive menu to WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Have you ever seen a full screen, responsive menu on popular blogs? These menus are displayed when clicking on the menu icon. When a user clicks on it, an overlay slides onto the screen and displays the menu content.

In this tutorial, I'll show you how to display a full-screen and responsive menu on your WordPress blog, without having to write a single line of code.

fullscreen-preview menu

The first thing to do is to install and activate the plugin DC Fullscreen Responsive Menu. After activating the plugin, you must visit the " Appearance> DC Fullscreen Menu“, To configure the menu.

fullscreenmenusettings

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

In this new interface, you have to choose the menu you want to display. If you have not yet created a menu, you have to think about doing it.

After that you need to select the direction of the animation (from left to right or from right to left). You can choose between several types of entertainment.

DC Fullscreen Responsive allows you to choose a background image and text for the menu as well. Make sure you've chosen a great combination that will be soft on the eyes, and that matches your color scheme.

When choosing a text or a background color, you should always consider the readability character.

You can choose a font on Google Fonts for your menu. Just specify the font name and the plugin will do the rest.

Don't forget to uncheck the box " Tiny Link to author", Which will prevent you from posting a link to the author's website (Unless you want to bring your support, which will not be any refusal).

And finally, you have to click on the button "Submit" to save your menu. You can now visit your blog to see it in action. Try resizing the dimensions of the browser window, if you cannot test this menu on other devices.

That's all for this tutorial, don't hesitate to share it with your friends on your favorite social networks. And I take this opportunity again to wish you an excellent and happy new year 2016.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
4 shares
Share4
tweet
Save