Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add a Fullscreen Responsive Menu in WordPress

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.

Fullscreen responsive menu overlay in WordPress

Video Tutorial

Subscribe to WPBeginner

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.

Fullscreen menu 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.

We hope this article helped you add a fullscreen responsive menu to your WordPress site. You may also want to see our guide on how to add slide panel menu in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 CommentLeave a Reply

  1. Hey guys!

    I love how a lot of your posts have a Plugin option and then a manual tutorial as well. Is there a tutorial on how to manually add a menu like this to your child theme.

    I’m using Beaver Builder child theme and trying to learn how to add an off canvas menu as a secondary menu option. :)

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.