How to Create a Full Screen Menu in Divi

One of the growing trends in website design is the application of a full screen menu on a website. Thanks to its versatility and its ability to enhance rather than ruin the UX, full screen menu in most cases are ideally suited for almost any project. Having a website that really catches the eyes of users can prove to be a definite advantage in the world of marketing and advertisement, making the two more interactive by giving audiences a more hands-on approach to commercials.

In Divi, there are many options to customize your site menu thanks to the Divi theme builder feature where you can create a custom header template and use the Menu module to add a menu or custom menu you decided and then customize it to your liking. In this tutorial, we will show you how to create a simple and lightweight full screen menu in Divi using the Divi theme builder.

How to Create Full Screen Menu in Divi

Step 1: Add and Build a Global Header

First, let’s create a global header to make the menu available across your website, from the WordPress dashboard go to the Divi → Theme Builder. Click Add Global Header → Create Global Header.

Step 2: Edit the 1st Section Settings and Add a CSS Classes

You will be taken to the Divi Builder editor, and there will be a section in the editor. Open the Section Settings panel, on the Background block, change the background color into a completely transparent one = rgba(255,255,255,0).

Next, remove the section’s default top and bottom padding, go to the Design tab → Spacing then set the Top and Bottom Padding to 0px.

Continue by assigning a CSS class to the section to turn this section into a full screen menu for the CSS code later, go to the Advanced tab → CSS ID & Classes and type: “section-transform” in the CSS Class.

Then go to Visibility block, and set Horizontal and Vertical Overflow to Hidden, continue to Position block, set the Z Index to 99999, this setting will ensure the section is always on top of all your pages and posts content. Also, enable the hover option and make sure the same value of the Z Index is applied there too.

Step 3: Add the First Row to The Section

Let’s continue by adding a row to the section, and it will be the first row to the section. Then without adding any module yet, open the Row Settings, go to the Design tab and open the Sizing block, and make the row take up the entire width of the screen. Here is the setting needed:

• Use Custom Gutter Width: Yes
• Gutter width: 1
• Width: 100%
• Max Width: 100%

Continue by removing the default top and bottom padding next in the Spacing block, and set the Top and Bottom Padding to 0px.

Step 4: Add the Text Module for the Menu Button

We only need the text module in this row, and the content of this text module will be your menu button later, you can add a menu symbol of your choice. In this article, we are using the hamburger symbol “≡“.

Continue by moving to the Design tab → Text, here we will change the text setting as follows:

• Text Font: Arial
• Text Color: #0000000
• Text Size: 3vw(Desktop),5vw(tablet),7vw(phone)
• Text Line Height: 1em

Continue by adding white-colored Text Shadow to the hamburger icon to give it a better clarity in the dark section of the website.

Then go to modify the spacing values in the Spacing block to make the menu button float a bit in the left corner, the values are as follows:

• Top Padding: 2vw (Desktop), 3.5vw (Tablet), 5vw (Phone)
• Bottom Padding: 2vw (Desktop), 3.5vw (Tablet), 5vw (Phone)
• Left Padding: 3vw (Desktop), 4vw (Tablet), 7vw (Phone)
• Right Padding: 3vw (Desktop), 4vw (Tablet), 7vw (Phone)

Step 5: Add the CSS ID to the Menu Button to Trigger Full Screen Menu

To trigger the full screen menu when the hamburger icon is clicked, we need to assign a CSS ID to the text module, we will call this CSS ID later in our code. Go to the Advanced tab → CSS ID & Classes and type: “menu-open” in the CSS ID.

Step 6: Add the Second Row to Place the Menu

Let’s continue by adding a second row to the section to place our menu, then change its Sizing and Spacing setting. First open the Row Settings → Design tab→ Sizing block and the settings are Width: 100%, and Max Width: 100%.

Next, go to the Spacing block to modify its value as follows:

• Top Margin: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)
• Bottom Margin: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)
• Left Padding: 19vw
• Right Padding: 19vw

Step 7: Adding the Menu Item

Let’s add items to our menu, and start by adding a text module to the column. Then type the name of the first menu and give it a link if you want. Our first menu is the “Home” menu, and the link is our home page “https://www.wppagebuilders.com/”.

Continue by going to the Design tab to customize the text style, our settings are as follows:

• Text Font: Arial
• Text Font Weight: Semi Bold
• Text Color: #000000
• Text Size: 3vw (Desktop), 7vw (Tablet), 8vw (Phone)
• Text Letter Spacing: -0.1vw
• Text Line Height: 1em

Next is the Spacing settings. The settings are as follows:

• Top Margin: 1vw
• Bottom Padding: 2vw
• Left Padding: 3vw

Let’s add a bottom border, that will become a separating line between each menu. Go to Border block, on Border Styles, and pick the bottom border. For more settings is as follows:

• Bottom Border Width: 1px
• Bottom Border Color: #333333

Let’s finish the text module setting by adding a custom CSS Class. And this CSS Class needs to be added to each and every menu item you will be using. Go to the Advanced tab → CSS ID & Classes and type: “menu-item-click” in the CSS Class.

Continue by duplicating the text module to the number of menus you want. However, make sure the menu doesn’t surpass the height of your screen. We will go with 4 menus this time, so we will clone it three times. To achieve it, click on the menu text module, then click the duplicate icon 3 times.

Then proceed to change each duplicated menu item’s name and the link you want.

Step 8: Adding the Code for Full screen Menu

It’s time to add some code for the full screen menu, the following code will transform the section to full screen when the menu icon is clicked.

<script>
jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});
</script>

<style>
.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
</style>

To add the code, firstly we will create a new row and add the Code Module inside. We will limit space taken up by this row by removing all default top and bottom padding.

Continue by adding the Code Module and paste the above code into it.

Step 9: Final Sizing for the Section

Once you completed adding all the modules and their content in the section, it’s time for the final sizing. Open the Section Setting → Design → Sizing and apply the following sizing to the section:

• Width: 8vw (Desktop), 11vw (Tablet), 18vw (Phone)
• Height: 7vw (Desktop), 11vw (Tablet), 18vw (Phone)

Continue by going to the Advanced tab → Custom CSS → Main Element and add the following CSS snippet:

position: fixed;
top: 0;

Make sure the same CSS snippet applies on hover too.

Step 10: Save the Project and Watch it Live

And our simple full screen menu is ready for action, go save your menu by clicking the save button, close the editor and click save changes on the Theme Builder page. Try opening one of your pages or posts let’s and try clicking on your newly created menu. Below is how our menu appears on one of our pages.