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

slide-in menu

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 Divi Daily email list 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.

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’.

slide-in menu

Start Building Global Header

Continue by selecting ‘Build Global Header’.

slide-in menu

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)

slide-in menu

Spacing

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

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

slide-in menu

Position

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

  • Position: Fixed
  • Location: Top Center

slide-in menu

Add Row #1

Column Structure

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

slide-in menu

Sizing

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

  • Width: 97%
  • Max Width: 100%

slide-in menu

Spacing

Modify the spacing settings next.

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

slide-in menu

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;

slide-in menu

Add Image Module to Column 1

Upload Logo

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

slide-in menu

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>

slide-in menu

Background Color

Change the module’s background color next.

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

slide-in menu

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

slide-in menu

Sizing

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

  • Width: 120px
  • Module Alignment: Right

slide-in menu

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

slide-in menu

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:

slide-in menu

Background Color

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

  • Background Color: #e7e0e2

slide-in menu

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

slide-in menu

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

slide-in menu

Spacing

Modify the spacing settings across different screen sizes too.

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

slide-in menu

Border

And complete the row settings by adding a left border.

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

slide-in menu

Add Text Module to Column

Add Content

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

slide-in menu

Add Link

Continue by adding a relevant link to the menu item.

  • Module Link URL: #

slide-in menu

Background Color

Modify the background color next.

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

slide-in menu

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

slide-in menu

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

slide-in menu

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.

slide-in menu

Change Content & Links of Duplicate Text Modules

Change the content and links of each duplicate Text Module.

slide-in menu

slide-in menu

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.

slide-in menu

Add Link

Add a link too.

  • Button Link URL: #

slide-in menu

Alignment

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

  • Button Alignment: Center

slide-in menu

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

slide-in menu

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

slide-in menu

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)

slide-in menu

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

slide-in menu

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

slide-in menu

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)

slide-in menu

Change Row #2 Opacity

And bring the opacity to 0 in a default state.

opacity: 0;

slide-in menu

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

slide-in menu

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');
});
});

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!

slide-in menu

slide-in menu

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

slide-in menu

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.

The post How to Create a Responsive Slide-In Menu with Divi’s Theme Builder appeared first on Elegant Themes Blog.