How To Create A Fullscreen Overlay Menu With The Divi Menu Module Tutorial by Pee Aye Creative

How To Create A Fullscreen Overlay Menu With The Divi Menu Module

This tutorial will show you how to create a large fullscreen overlay menu on desktop or mobile using the Divi Menu module and some CSS!
Fullscreen Divi Menu GIF min

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Create A Theme Builder Header

In order for this to work, it is required to use the Menu module in a Theme Builder header template. I hope by now that you are very familiar with the Theme Builder, but if not you can check our our Divi Theme Builder mini course. Anyhow, the first step is to go to Divi>Theme Builder and add or edit the header template. If you want the menu to show up on every page of your site, then use the first template to make a global header template. If you only want this on certain pages, or you just want to test it out, then you can create a new template and use a custom header.

NOTE: I’m not showing screenshots of these first few steps because they are quite basic and common, but if you are unsure of what to do you can follow the video to see how to do it!

2. Add And Adjust The Menu Module

Once you are in the header template, add a single column row and add the Menu module. At this point, there are no required adjustments needed for the Menu module settings, but here are some that I would recommend.

  • Set the text color in the Design tab>Menu Text toggle
  • Make the text font size bigger in the Design tab>Menu Text toggle and adjust for responsive Desktop, Tablet, and Phone
  • Set the text line height to 1.2em
  • Set the hamburger menu color in the Design tab>Icons toggle
  • Make the hamburger menu icon font size bigger in the Design tab>Icons toggle

These are totally optional, but if you do this you can achieve an amazing design very quickly. Scroll down to the bottom to see a screenshot of the menu I made, it is really beautiful!

Here are my modified styles in the Menu module if you want to replicate what I did:

modified styles for the fullscreen Divi menu tutorial 1

3. Add A Custom CSS Class To the Section

Normally we add a CSS class to the module, but in this tutorial, we need to add the custom CSS class to the blue section. This is the same section where you added the Menu module to in the previous step. Open the section settings and go to the Advanced tab and open the Custom CSS & IDs toggle. There you need to write “pa-fullscreen-menu” in the CSS Class input field.

add css class to header section to make the Divi fullscreen menu

4. Add The Custom CSS To Make the Menu Fullscreen

Now for the main part of the tutorial, the free code snippets! This code is doing a lot of things, so please reference both the video and the comments if you want to understand it. Otherwise, copy and paste away!

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*align the hamburger menu to the right right*/

.pa-fullscreen-menu .et_pb_menu__wrap {
	justify-content: flex-end !important;
}


/*hide the desktop version of the menu*/

.pa-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
	display: none !important;
}


/*show the mobile version of the menu on desktop*/

.pa-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
	display: block !important;
	align-items: center !important;
}


/*style the opened menu*/

.pa-fullscreen-menu .opened #mobile_menu1 {
	width: 100vw !important;
	position: fixed !important;
	top: 0em !important;
	left: 0vw !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	flex-direction: column !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: visibility 0.3s, opacity 0.3s ease-in-out;
	padding: 0 !important;
}


/*style the closed menu*/

.pa-fullscreen-menu .closed #mobile_menu1 {
	background-color: #fff !important;
	text-align: center !important;
	width: 100vw !important;
	position: fixed !important;
	left: 100vw !important;
	top: 0em !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-direction: column !important;
	transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
	opacity: 0 !important;
	visibility: hidden !important;
}


/*remove the bullet points from the list items*/

.pa-fullscreen-menu #mobile_menu1 li {
	list-style: none !important;
	text-align: center !important;
	width: 100%
}


/*move the menu to the top above other elements*/

.pa-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
	z-index: 999999 !important;
}


/*change the opened menu icon*/

.pa-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
	content: "d" !important;
}


/*make the hamburger menu fixed position on mobile*/

.pa-fullscreen-menu .opened .mobile_menu_bar {
	position: fixed !important;
}


/*remove the default blue border top on the mobile menu*/

.pa-fullscreen-menu .et_mobile_menu {
	border-top: none;
}


/*remove the default background color on menu items*/

.pa-fullscreen-menu .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*remove the default hover background color and adjust opacity*/

.et_mobile_menu li a:hover {
	background-color: transparent;
	opacity: 1;
}


/*remove the default border bottom on menu items*/

.pa-fullscreen-menu .et_mobile_menu li a {
	border-bottom: none;
}

5. Enjoy Your Fullscreen Divi Menu!

Now go take a look at your site and make sure everything is working well. Following the adjustments that I made in step 2 and the code in step 3, my menu looks like this:

Fullscreen Divi Menu GIF min
12
Last updated Aug 31, 2021 @ 9:23 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

8 Comments

  1. sabine

    Hi Nelson, does it also work with submenus? On desktop open submenu on hover and on other devices on click.
    I love to follow your explenations. Sorry cannot show the website as its under construction. But i did your hamburger icon on desktop tutorial. Later on i tweaking around….to get a fullwith menu but its not full working…im still on it…
    but if your new tutorial works with submenus i would redoo everything
    kind regards sabine

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      I’m not exactly sure what you are asking. Are you asking if you can have submenus in the menu? I don’t think that is relevant to our tutorial as far as I know.

      Reply
      • Sabine Vals Frias

        Sorry for the confusion. Yes, if i have submenus will the submenus show on hover?

  2. Christopher Scroggs

    Hey, how do I get it to not force the mobile menu on the desktop? I have tried everything I can think of. @media screen, having multiple menus on divi, taking some of the code out, etc. nothing seems to work.

    Reply
    • Christopher Scroggs

      Nevermind i got it. i was doing @media wrong *insert face palm*

      Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart