How to Create Slide-in Menu in Divi

Updated: May 12, 2022

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general