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: "\4d" !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

Last updated Aug 31, 2021 @ 9:23 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

61 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
  3. Chris

    Hi Nelson!
    is it possible to be transparent the menu bar?
    and only have background color in fullscreen menu?
    also the burger row section should be transparent and
    when pressing the burger then the background color should not be transparent anymore.

    Reply
    • Hemant Gaba

      Hi Chris,

      I am afraid that I am not completely sure about what you are trying to achieve. Could you please elaborate a little more and provide the URL of the website as well for better clarity?

      Reply
      • Nate

        I think I understand what they are trying to say. The menu which is awesome by the way is set to a white background as it is necessary to take up the whole screen on activation. But they want it transparent when not activated to show a background picture without showing the background (white) of the menu on top. I am looking for the same adjustment.

      • Hemant Gaba

        Hey Nate,

        Thank you for explaining, could you please provide the URL of the website so that I can check and customize the CSS?

  4. sonh

    Hi Nelson

    How I can make Author quote in post at the top?

    Reply
    • Hemant Gaba

      Hi there,

      I guess the question you asked is not related to the guide in view so it would be great if you ask a question that is related to the guide as it will help other visitors as well to find a solution.

      To answer your question, you can create a template for all posts in the Theme Builder and there you can dynamically show author details using the text module.

      Reply
  5. Simon

    Hi Nelson,

    Thank you so much for this! I had to edit the snippet a bit to make it work – maybe it’s a mistake, so I’ll just put it up here:

    .pa-fullscreen-menu .closed #mobile_menu1 {
    background-color: #fff !important;
    *** Shouldn’t this be when menu is .opened? ***

    and

    .pa-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
    content: “d” !important;
    *** The content is missing “\4” 🙂 ***

    All the best!

    Reply
  6. Matthew

    Thanks for the tutorial!

    Is there a way to shrink the clickable area for each link so that it’s not larger than the link text? Currently each link is full width, so someone might accidentally click a link without meaning to.

    Sorry if this is a dumb question, I’m not the most experienced with CSS

    Reply
    • Hemant Gaba

      Hi Matthew,

      First of all the question, you asked is not dumb at all and I will definitely help you with the issue. But for me to provide a snippet I want the URL of the website where this overlay is placed so that I can investigate further.

      Reply
  7. Alison

    This is a great method! Thank you! I was wondering if it is possible to add extra modules into the open menu. For example social media follows and a logo?

    Thanks for putting together such clear and easy to follow tutorials, much appreciated.

    (I’m building on a dev site so can’t post it at this stage…)

    Reply
  8. Taylor

    Hi Nelson, Once again an amazing, clear and simple to follow tutorial, thank you. Is it possible to change the thickness of the lines in the hamburger?

    Reply
    • Hemant Gaba

      Hi Taylor,

      Could you please use this snippet and see if that helps?

      .pa-fullscreen-menu .et_pb_menu__wrap .closed .mobile_menu_bar:before {
      font-weight: bold !important;
      }

      Let me know how it goes. 🙂

      Reply
  9. sarah

    I couldn’t get the x to show for me with the open menu but I added “\2715” into the css and now it works perfectly for anyone that is struggling with the same situation

    Reply
  10. Taylor

    Is it possible to make the ‘close transition’ smoother? At the moment it’s very abrupt and menu closes sometime before the new selected page is visible (Apologies if I have missed something). https://iamavenuestaging.co.uk/

    Thanks

    Reply
    • Hemant Gaba

      Hi Taylor,

      While investigating the URL provided, I have not seen any transition issues. Please check the website in incognito mode and see if that helps.

      Reply
  11. Ashley Kettenring

    Hi! I’m pretty new to divi and I just added this code, however, I’m still getting lines and the hover effect. Am I missing something?

    Reply
  12. Juan-Carlos Naveira

    Hello 🙂 since I installed this amazing menu, I am very happy! But unfortunately there is a bug that I cannot solve: I have a horizontal scrollbar at the bottom! Can you help me, it is about this site: https://www.lesequinoxes.fr/

    Reply
  13. Michael

    Hello Nelson, I love your tuts!

    Is there an easy way to use this great looking fullscreen menu just for for mobile?

    For my actual project I built a transparent Header with a sticky instance like described by elegant themes: https://www.elegantthemes.com/blog/divi-resources/how-to-make-your-transparent-header-sticky-on-scroll-with-divi

    And now I want an additional fullscreen menu just for mobile. tried some other solutions which did not work.

    Do you think the ET sticky menu is combinable with your fullscreen menu for mobile?

    Thnk you so much.

    Reply
    • Hemant Gaba

      Hey Michael,

      Could you please share the URL for me to investigate this further for you?

      Reply
  14. John Ballard

    You’re a life saver Nelson, I’ve been trying to work out how to do this for a week!
    One question; is there a way to stop the user scrolling down the page?
    I’d like it so that they have to click the X to go back, at the moment, they can scroll down past the open menu.

    Reply
    • Hemant Gaba

      Hey John,

      The URL that you provided has a completely different Menu so could you please share the URL which has a fullscreen overlay menu so that I can check where the issue is happening?

      Reply
  15. John Ballard

    Hi Nelson, one more question if you don’t mind.
    Is there an easy way to put the word MENU to the left of the hamburger icon?

    I’m new to Divi and your tutorials help a lot, thanks!

    Reply
    • Hemant Gaba

      Hey John,

      Could you please try this code and see if that helps?

      span.mobile_menu_bar:after{
      content: "Menu";
      font-family: sans-serif !important;
      color: #fff;

      }
      span.mobile_menu_bar{
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      }

      Let me know how it goes.

      Reply
      • Julien

        Hello,

        Is there a solution to REPLACE the hamburger menu by the word “MENU” please ?
        Thank you very much

      • Hemant Gaba

        Hey Julien,

        If you want to completely remove the hamburger icon and place the menu text instead. Please use the code given below:

        span.mobile_menu_bar:before {
        content: "MENU";
        font-family: Roxie Rossa!important;
        font-size: 28px;
        color: #2E3333;
        }

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

        }
        span.mobile_menu_bar:after{
        display: none;
        }

        Let me know how it goes.

      • Julien

        Thank you very much !

  16. Mamour Diamé Ly

    Hi ! Thank you very much.

    But please, tell me how to use it only on mobile screen ?

    Reply
    • Hemant Gaba

      Hey Mamour,

      Could you please share the URL of the website so that I can create a snippet for the query you asked?

      Reply
  17. Valerie Werro

    Hi!

    One question: Is there a way to open the hamburgermenu on desktop to the top? It opens downward and it’s not visible.

    Reply
    • Hemant Gaba

      Hey Valerie,

      Could you please share the URL of the website for me to investigate further on this issue?

      Reply
  18. Jon Lee

    Hello, I am trying to use your mobile menu in combination with some other code that allows for interior dropdowns for subpages on mobile. I’m running into an issue where the “X” icon will disappear if I try to scroll within the mobile menu, do you have any idea why that is? I’ve tried overflow:hidden on the body when opening the mobile menu but it doesn’t seem to solve the issue. Any help is appreciated!

    Reply
    • Hemant Gaba

      Hey Jon,

      The solution for this issue usually is to position the span in which the icon is to fixed and then it will not move even if you scroll. This fix is already implemented on the your website but the issue is the icon placement as right now the icon is going out of the screen for mobile devices. In order to fix that please use the code given below and see if that helps:


      .pa-fullscreen-menu .opened .mobile_menu_bar{
      right: 0;
      }

      Let me know how it goes.

      Reply
      • Jon Lee

        That worked, thank you for the help!

  19. miiamin Costan

    hello…is it possible to show in the left corner, the logo from the home page?

    thank you

    Reply
    • Hemant Gaba

      Hey Miiamin,

      Could you please share the URL in order for me to investigate it further?

      Reply
  20. Miiamim costan

    Hello
    Is it possible to have on the left corner, the logo?

    Reply
    • Hemant Gaba

      Hey Miiamim,

      As I could see on the URL provided, the logo is on the left corner already so I am guessing that the issue is resolved now.

      Reply
  21. Valentin

    Hello,
    Thank you so much for the Great Tutorial.
    I am trying to get the full screen on mobile, How Can I get that done please ?
    I watch many of the tutorials and have been able to create first time in two years my own transparent Menu and I am so happy.

    Reply
  22. Dom

    Hi Nelson,

    Excellent tutorial as normal. Can you please tell me how to add social icons to the bottom of the full screen menu.

    Reply
    • Hemant Gaba

      Hey Dom,

      Could you please share the URL of the website for me to investigate it further?

      Reply
  23. Marcos

    I tried this code and word, but i have aligned the menu to the right.
    I need to apply a padding left to bring the menu a little bit more to right.
    Try a lot os ways but doesnt work. Someone know how to do this?

    Reply
  24. Julien

    Hello,

    I try to replace the hamburger icon by text “MENU”.
    Is it possible ?

    Thank you

    Reply
    • Hemant Gaba

      Hey Julien,

      I guess the solution for this query is already given to you and I can see the menu text instead of the Hamburger icon on the URL provided.

      Reply
  25. Louis

    Hi Nelson, thank you for this code – what a time saver – how can I make sub-menus collapsable, so they open on click?

    Mine appear offset under the parent which makes the menu a little messy. Thanks!

    Reply
  26. G

    Hi Nelson,

    You’ve been a life saver several times. I have a complicated project that you made much easier to handle. Thank you for that!

    Now, I’ve used your code for having a burger menu and a normal menu and this code doesn’t seem to work in this situation. Am I missing something? I’ve changed #menu_menu1 with the name I had for the menu, but it does nothing. I’m stuck and don’t see a way out. Could you help or point me in the right direction? Here’s a link in case it might help: https://urbio.ro/home/

    Reply
    • Hemant Gaba

      Hey there,

      I am not able to see the Fullscreen Overlay Menu on the URL you have shared. Could you please place the code provided in the code so I can check where the issue is happening?

      Reply
  27. Melissa

    Hi Nelson,

    Thank you for this great tutorial! It has worked perfectly on desktop but I am having some trouble getting the same full page menu to display on mobile and table. Can you please advise?

    Thanks so much! Melissa

    Reply
    • Hemant Gaba

      Hey Melissa,

      I have checked the URL provide and will provide you the solution on this very soon.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart