The great thing about slide menus is they allow for more content to be available without taking up extra space on the screen and they fit into most layouts and are often found within the mobile apps, so there will be a sense of familiarity in using them.
We will demonstrate two ways to have a slide-in menu on your Divi website in this tutorial, the first is by utilizing the theme customizer for Divi Theme, and the second one is to build a global header using the Divi theme builder.
How to Create Slide-in Menu in Divi Via Theme Customizer
First, you need to log in to WordPress as an administrator to have access to the website theme customizer, and you need to make sure no active global header on the Divi theme builder. Then, proceed to Divi → Theme Customizer.
You will be taken into theme customize to customize your website. From here, you can change your site title and tagline, add widgets to a sidebar or footer, create menus, change your homepage settings, and more.
Continue by clicking the Header & Navigation block → Header Format → Header Style, then select the Slide in option.
Viola just like that your slide-in menu is ready for action.
However, if you want to add more customization like changing the slide-in menu width, background color, text size, and more, you can go to the Slide in & Fullscreen Header Settings on the Header & Navigation block that appear after you choose the slide-in or full screen menu option.
How to Create Slide-in Menu in Divi Via Theme Builder
This time we will show you how to create a slide-in menu in Divi using the Divi theme builder by building a global header. From the Divi menu on the WordPress dashboard, choose the Theme Builder option then proceed to build a global header.
The Section Setting
You will be taken to the Divi Builder editor, start by clicking the section settings icon to change the first section setting. Continue by changing the section background color into a transparent one: rgba(255,255,255,0)
Move on to the Design tab → Spacing to remove the default Top and Bottom padding. Set the value to 0 for both.
Move on to the Advanced tab → Position, then change the Position option into Fixed and change the Location to the top center one.
First Row Setting
Continue by adding a new row into the section using the following column structure:
Before adding any modules, open the Row Settings first, then change the Sizing and Spacing option on the Design tab as follows:
Sizing:
- Width: 97%
- Max Width: 100%
Spacing:
- Top Padding: 1%
- Bottom Padding: 0px
Then move to the Advanced tab → Custom CSS → Main Element and add the following snippets there:
display: flex; align-items: center;
You can place your site logo on the first column of this row by adding an Image Module there.
Create Interactive Hamburger Icon
Move to the third column or column 3, and add a Text Module. We will use the text tab instead of visual to add three HTML spans with custom classes to create an interactive hamburger icon.
<span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span>
Then change the background color using this value: rgba(0,0,0,0.04)
Move on to the Design tab → Text → Text Line Height to remove the text line height by inputting 0em
value to have full control over the spans we’ve added.
Move to the Sizing setting and modify the value as follows:
- Width: 120px
- Module Alignment: Right
Let’s square up the module by adding padding custom values in the Spacing settings, the value as follows:
- Top Padding: 40px
- Bottom Padding: 60px
- Left Padding: 40px
- Right padding: 40px
Then add a custom CSS ID to complete the module. We’ll use this CSS ID to create a click function in our code. Move to the Advanced tab → CSS ID & Classes then input the following text to the CSS ID field:
- CSS ID: slide-in-open
Second Row Settings
Let’s continue by creating a new row, the second row. Without adding any module yet, click on the row settings icon to open its settings. This row will be the place for our entire slide-in menu.
Let’s change the background color to your liking, for our menu we choose this color: #e7e0e2
Continue by moving to the Design tab → Sizing and modify the value as follows:
- Use Custom Gutter Width: Yes
- Gutter Width: 1
- Width: 20% (Desktop), 40% (Tablet), 60% (Phone)
- Height: 100vh
Then move to the Spacing settings and modify the value across different devices for Top Padding: 10vw (Desktop), 30vw (Tablet), 40vw (Phone).
Continue by adding a custom CSS class, we need it to allow the row to slide in. Move to the Advanced tab → CSS ID & Classes then input the following text to the CSS Classes field:
- CSS Class: slide-in-menu-container
Then bring the opacity of the row to 0 in the default state by inserting opacity: 0;
in Custom CSS → Main Element.
To finish the second-row setting, modify the positioning in the Position setting to the following values:
- Position: Absolute
- Location: Top Right
- Horizontal Offset: -20% (Desktop), -40% (Tablet), -60% (Phone)
Adding the Menu
Let’s start adding the menu by adding a text module and typing the first menu you want to show, we use the home for our first menu. Then add a relevant link to it.
Continue by changing the background color to: rgba(216,210,212,0.35)
Move on to the Design tab and modify the Text settings as follows:
- Text Font: Arial
- Text Font Weight: Bold
- Text Color: #0c71c3
- Text Size: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
- Text Shadow: Light Effect
- Text Alignment: Center
Continue by modifying the Spacing values across different devices. The values are as follows:
- Bottom Margin: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
- Top Padding: 1vw
- Bottom Padding: 1vw
The first menu is complete, now for the rest of the menu, we just need to clone the first menu by clicking the duplicate module icon and then change the text and the link as we want.
Adding The Slide-In Function
Let’s finish the menu by adding a code module to the second column of the first row, then copy the following code into the module.
<style> #slide-in-open{ cursor: pointer; } .line{ display: block; position: absolute; height: 4px; width: 100%; background: #24394A; border-radius: 9px; opacity: 1; -webkit-transition: .1s ease-in-out; -moz-transition: .1s ease-in-out; -o-transition: .1s ease-in-out; transition: .1s ease-in-out; } .line-2 { top: 10px; } .line-3 { top: 20px; } #slide-in-open.open .line-1 { top: 10px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } #slide-in-open.open .line-2 { display: none; } #slide-in-open.open .line-3 { top: 10px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .slide-in-menu { right: 0 !important; opacity: 1 !important; } .slide-in-menu-container { -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> <script> jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container').toggleClass('slide-in-menu'); }); }); </script>
The code should take care of the click function effect and style the hamburger icon spans, then make the menu slide in when the icon is clicked.
Once the slide-in menu is complete, let’s save the project and apply the changes by clicking save all changes in Divi theme builder. Let’s take a look at the menu in a post on our website.
6 thoughts on “How to Create Slide-in Menu in Divi”
Hi there! I found this great tutorial and used it on my site. It looks awesome, but I noticed I have a couple of hover elements lower down on the page that aren’t working properly (the photo that says “Global. Local. Personal.” and the one beneath it). I am wondering if the menu is causing issues because it essentially shares the same column. If you have a moment, can you take a look and see if you have any ideas how I can fix it? Thanks so much!
https://digidesigncompany.com/
Hello Michelle,
Regarding your issue, may I know what you mean by sharing the same column?
And your menu is created using the global header or custom header right?
Hi! This is great! Thank you. I was wondering if there’s a way to change the background color of the section upon scroll?
Hi Mercy,
You can change the menu section background color by replacing the “#e7e0e2” color from Second Row Settings step with any color of your choice.
Hi, This is a super helpful article! Is there a way to tap outside the menu to close it? Thanks!
Hi James,
We appreciate your feedback and are glad the article is useful!
As the open and close functionality relies on toggling the same ‘open’ class, it is regrettable that this cannot be accomplished with the provided code.