How to Create a Responsive Slide-In Menu with Divi’s Theme Builder

When setting up a website for a client of yourself, you’ll find yourself contemplating what type of header to build. The most used one around the web is the horizontal menu bar at the top, but there are other options as well, such as a slide-in menu. Slide-in menus help you limit the space that’s taken up by the global header. Rather than show all your menu items right off the bat, you can let a slide-in menu appear when your visitors click on the hamburger icon in the top right corner. Using a slide-in menu helps you add additional interaction to your website.

In today’s use case Divi tutorial, we’ll show you how to create one using Divi’s Theme Builder, the built-in Divi elements and some additional code. The design of this slide-in menu matches the Yoga Instructor Layout Pack perfectly but you’re free to modify it to match any website you build. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

Download The Responsive Slide-In Menu Global Header Template for FREE

To lay your hands on the free slide-in menu global header template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Go to Divi Theme Builder & Start Building Global Header

Go to Divi Theme Builder

Start by going to the Divi Theme Builder in the backend of your WordPress website and click on ‘Add Global Header’.

Start Building Global Header

Continue by selecting ‘Build Global Header’.

2. Create Header Design

Section Settings

Background Color

Once inside the template editor, you’ll notice a section. Open that section and make the background color transparent.

• Background Color: rgba(255,255,255,0)

Spacing

Move on to the design tab and remove all default top and bottom padding.

• Top Padding: 0px
• Bottom Padding: 0px

Position

Then, we’ll turn the section fixed by going to the advanced tab and modifying the position settings.

• Position: Fixed
• Location: Top Center

Add Row #1

Column Structure

Once you’ve completed the section settings, add a new row using the following column structure:

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings as follows:

• Width: 97%
• Max Width: 100%

Spacing

Modify the spacing settings next.

• Top Padding: 1%
• Bottom Padding: 0px

Main Element

Then, go to the advanced tab and add two lines of CSS code to the row’s main element. This will help us vertically align column content in our row.

display: flex;
align-items: center;

Add Image Module to Column 1

Upload Logo

Time to add modules, starting with an Image Module in column 1. Upload your logo.

Add Text Module to Column 3

Add 3 Spans to Content Box

Then, move on to the third column and add a Text Module. We’ll use the Text Module’s text tab to add three HTML spans with custom classes assigned to them. Later on the tutorial, we’ll use these spans to create our interactive hamburger icon.

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Background Color

Change the module’s background color next.

• Background Color: rgba(0,0,0,0.04)

Text Settings

Then, move on to the design tab and remove the text line height. This will help us have full control over the spans we’ve added.

• Text Line Height: 0em

Sizing

Next, we’ll modify the module’s sizing settings.

• Width: 120px
• Module Alignment: Right

Spacing

And we’ll complete the module settings by turning the module into a square using custom padding values in the spacing settings.

• Top Padding: 40px
• Bottom Padding: 60px
• Left Padding: 40px
• Right padding: 40px

Add Row #2

Column Structure

On to the next row! We’ll use this row to design our entire slide-in menu. Use the following column structure:

Background Color

Without adding any modules, open the row settings and change the background color as follows:

• Background Color: #e7e0e2

Background Image

We’re using a pattern background image as well. You can find the image we’ve used in the download folder you were able to download at the beginning of this tutorial but feel free to use any other background pattern of your choice.

• Background Image Size: Actual Size
• Background Image Position: Center
• Background Image Repeat: Repeat

Sizing

Then, move on to the design tab and change the sizing settings accordingly:

• Use Custom Gutter Width: Yes
• Gutter Width: 1
• Width: 20% (Desktop), 40% (Tablet), 60% (Phone)
• Height: 100vh

Spacing

Modify the spacing settings across different screen sizes too.

• Top Padding: 10vw (Desktop), 30vw (Tablet), 40vw (Phone)

Border

And complete the row settings by adding a left border.

• Left Border Width: 10px
• Left Border Color: #24394a
• Left Border Style: Double

Add Text Module to Column

Add Content

Time to add the first menu item Text Module! Add the copy to the content box.

Add Link

Continue by adding a relevant link to the menu item.

• Module Link URL: #

Background Color

Modify the background color next.

• Background Color: rgba(216,210,212,0.35)

Text Settings

Then, move on to the design tab and change the text settings as follows:

• Text Font: Domine
• Text Font Weight: Bold
• Text Color: #000000
• Text Size: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
• Text Alignment: Center

Spacing

Complete the module settings by adding some custom spacing values across different screen sizes.

• Bottom Margin: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
• Top Padding: 1vw
• Bottom Padding: 1vw

Clone Text Module (1 Module per Menu Item)

Once you’ve completed the first menu item Text Module, you can clone it as many times as needed. Just make sure your modules don’t exceed the viewport height.

Change Content & Links of Duplicate Text Modules

Change the content and links of each duplicate Text Module.

Add Button Module to Column

Add Copy

The last module we need in this row is a Button Module. Add some copy of your choice.

Add Link

Add a link too.

• Button Link URL: #

Alignment

Move on to the design tab and change the button alignment.

• Button Alignment: Center

Button Settings

Continue by styling the button module as follows:

• Use Custom Styles For Button: Yes
• Button Text Size: 0.7vw (Desktop), 1.5vw (Tablet), 2.5vw (Phone)
• Button Text Color: #000000
• Button Background Color: rgba(0,0,0,0)
• Button Border Color: #24394a
• Button Border Radius: 0px
• Button Letter Spacing: 4px

• Button Font: Open Sans
• Button Font Weight: Bold
• Button Font Style: Uppercase

Spacing

And complete the module settings by adding custom spacing values across different screen sizes.

• Top Margin: 5vw
• Top Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
• Bottom Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
• Left Padding: 1.8vw (Desktop), 3vw (Tablet), 4vw (Phone)
• Right Padding: 1.8vw (Desktop), 3vw (Tablet), 4vw (Phone)

3. Add Slide-In Functionality

Add CSS ID to Menu Icon Text Module

Now that we have all elements in place, it’s time to create the responsive slide-in menu effect! First, open the Text Module (containing the spans) in the third column of your first row and use a custom CSS ID in the advanced tab. We’ll use this CSS ID to create a click function in our code.

• CSS ID: slide-in-open

Add CSS Class to Row #2

Then, open the second row, go to the advanced tab and add a custom CSS class. On click, we’ll allow the row to slide in.

• CSS Class: slide-in-menu-container

Change Row #2 Positioning

We’ll reposition this row too. Notice how the horizontal offset matches the row’s width across different screen sizes in the sizing settings.

• Position: Absolute
• Location: Top Right
• Horizontal Offset: -20% (Desktop), -40% (Tablet), -60% (Phone)

Change Row #2 Opacity

And bring the opacity to 0 in a default state.

opacity: 0;

Add Code Module to First Row’s Second Column

Insert CSS Code

To create the click function effect and style the spans of our hamburger icon, we’ll need some CSS code. Add a Code Module to the second column of your first row and place the following lines of CSS code in between style tags as you can notice in the print screen below:

#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;
}

Insert JQuery Code

We’ll need to add some JQuery for the click function too. Make sure you place the code in between script tags as you can notice in the print screen below:

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

4. Save Theme Builder Changes & View Outcome on Website

Once you’ve completed all elements in your global header, the only thing left to do is save all changes and view the outcome on your website!

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

Mobile

Final Thoughts

In this post, we’ve shown you how to use Divi’s Theme Builder to create a responsive slide-in menu for your next Divi project. We’ve combined the best of Divi’s built-in elements and options with some custom click function code. This allows you to focus on designing the slide-in menu and let the code take over the functional part of the global header! You were able to download the JSON file for free as well. If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.