The DevTeam Alpha News Aggregation service has sourced the following article originally published on Divi Space:

Slide-in menus, also known as off-canvas or mobile style menus, help clear up space and give your site a clean modern look and feel. With Divi’s built-in settings you can quickly set your navigation bar to slide-in and the standard configurations are fine in most cases, but the styling options are very limited.

In this tutorial, you’ll learn how to:

  • Activate Divi’s included slide-in menu to create a cleaner more streamlined navigation design
  • Build a and style a custom slide-in menu with CSS
  • And, how to make quick styling changes to the hamburger icon used to toggle the slide-in menu

By looking both the built-in and manual options you’ll familiarize yourself with code and expand your design knowledge and get a better knowledge of what’s possible with the standard Divi settings.

Create a Slide-in Menu with the Default Divi Settings

Setting up a basic Slide-in menu with Divi is easy. To enable it, open the theme customizer and go to Header & Navigation > Header Format and choose Slide In from the Header Style dropdown box.

The Divi Slide in option is located in the Customizer options

When the icon is clicked, the page is pushed to the left, making room for the menu on the right. The hamburger icon becomes an X. Click the X and the menu closes as the page slide back into place.

This is what the slide-in menu looks like out-of-the-box but it comes with a bunch of configuration controls

Notice that because the page has been pushed to the left, the site’s logo is no longer showing on the screen.

Styling the Divi Slide-In Menu

To customize the style of your slide-in menu, go to the Header & Navigation > Slide In & Fullscreen Header Settings. Here, you find options to:

  • Choose to show the top bar
  • Set the menu width
  • Change text size
  • Set top bar text size
  • Edit letter spacing
  • Change the font
  • Edit the font style
  • Set the background color
  • Change the menu link color
  • And, set your active link color

If you add elements to the top bar you’ll also have adjustments for its text color and the search bar text and background colors.

Set colors, size, font, and more

For this example, I’ve adjusted the font and background colors of the primary and top bar separately, and I’ve adjusted the search font and background for the top bar.

As always with Divi, you can quickly achieve some pretty great effects without any code. But what if you want the slide-in menu to come in over your page and don’t want your site logo to disappear?

For this, we’ll use CSS to give our new navigation slider a custom look and feel.

‘CSS Only’ Slide-In Menus for Divi

The biggest advantage of doing it this way is that its light. I mean really light. The whole effect is less than 40 lines of CSS and it takes advantage of the built-in mobile JS, so we won’t be slowing down our site with additional animations.

Divi already has two states for the mobile menu:

.mobile_nav.opened

and

.mobile_nav.closed

By hijacking those you can achieve the desired effect without extra code. Here’s how it all comes together.

First, we need to stop the .mobile_nav.closed selector from setting the mobile menu to

display: none;

You can’t add transitions to an object set so you will need to override it. But you don’t want to see it when it should be closed.

You could push it all the way off-page with something like ‘left: 100%;’ but then you’re dealing with overflow and things get messy before you’ve even started.

Instead, turn the menu sideways with a 90-degree rotation. It’s there, on the right-hand side, but visually, you’d never know.

#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }

.mobile_nav.closed #mobile_menu {
 transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #fff; transition: .8s ease-in-out !important; }

Now in order to see it again, you just have to rotate it back. Set the origin of the transformation to right, so it kinda looks like it’s coming in on a hinge. This is one of the things that sets it apart from the default Divi slide-in menu.

.mobile_nav.opened #mobile_menu {
 transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #f1f1f1; transition: .8s ease-in-out; }

Now a little CSS to style the ‘menu close’ toggle and links. These colors represent a ‘light’ theme. If you’d prefer a dark theme, just invert the colors.

.mobile_nav.opened .mobile_menu_bar:before {
 content: "4d"; color: #303030; }

.et_mobile_menu li a { color: #303030; }

In order to make sure the menu can be pushed to the very right-hand side we need to make the menu container 100% wide.

Keep in mind, this container is also responsible for keeping the logo and hamburger menu from hugging the sides of the screen so you will need to account for that by adjusting the padding.

Next, adjust the z-indexing of the mobile bar to keep it from disappearing behind the menu.

@media(max-width: 980px) {
 
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }

#main-header .container.clearfix.et_menu_container { width: 100%; }

.logo_container { padding-left: 30px; }

#et-top-navigation { padding-right: 30px; }

}

Last but not least, add some queries to ensure that the menu is at least 340px wide until the viewport is smaller than that. Then it switches to 100% width.

Now your manual option should be set!

Things to Consider When Manually Making Changes

  • If you’ve got CSS in your customizer for the mobile menu it may conflict so clear it out.
  • Also, if you have a fixed header on mobile then you’ll have to change the CSS for #mobile-menu: instead of a min-height of 100vh, just set the height to 100vh and overflow to scroll.

The complete code

If you run into any issues, here is the completed code you can just copy and paste in or use it to compare with your own.

/** Divi Space slide in mobile edits**/

#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }

.mobile_nav.closed #mobile_menu {
 transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #fff; transition: .8s ease-in-out !important; }

.mobile_nav.opened #mobile_menu {
 transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #f1f1f1; transition: .8s ease-in-out; }

.mobile_nav.opened .mobile_menu_bar:before {
 content: "4d"; color: #303030; }

.et_mobile_menu li a { color: #303030; }

@media(max-width: 980px) {
 
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }

#main-header .container.clearfix.et_menu_container { width: 100%; }

.logo_container { padding-left: 30px; }

#et-top-navigation { padding-right: 30px; }

}

@media(min-width: 341px) {

#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }

} 

@media(max-width: 340px) {

#mobile_menu { width: 100%; margin-left: 0; }
}

Styling Your Custom CSS

The CSS from this tutorial includes color values and padding. You can change the values of these elements to further customize the look and feel. Enter the hex code of the color or the amount of padding you want. You might need to save and refresh the page to see the changes.

Background color when toggled out

In this example, I’ve changed the values for the background and text colors.

The CSS allows you to have a separate background color for the slide-in effect and the fully opened menu. So you can set the background to one color and then have it change when it is fully-opened as a fun little animation trick.

If you want to change the color values find the tags and adjust the value:

  • .mobile_nav.closed = slide in background
  • .mobile_nav.opened = fully opened background
  • .et_mobile_menu = fonts

You can also change the transition speed and style, margin, width, and more. Elements on your slide-in menu that don’t use custom CSS can still be adjusted with the standard Divi settings form the customizer. Pretty slick.

Here, you can see a new background color for the dropdown menu and some padding adjustments.

Use CSS to set your navigation slide-in background width

Adding padding to the top of the menu brings the links down lower within the menu. You can also change the width of the menu. This is what it looks like if you set the minimum width to 600 pixels.

Expanded (Hamburger-Style) Mobile Menu Options with Divi Switch

Regardless of which of these two methods you use to build your slide-in menu for Divi, you can customize the Divi mobile menu styles further with Divi Switch. Switch lets you both change the mobile menu icon and allows you to add custom text to the icon.

Mobile Menu Icon

Divi Switch adds several Divi hamburger menu styling options to the Theme Customizer. Go to Divi Space Settings > Divi Switch to see the menu settings.

Customize your menu with a different icon for your slide-in menu

Here, you can choose a custom icon from your list of Divi icons. It gives you so many options but for this example, I’ve selected the double down arrow.

Mobile Menu Text

Divi Switch also has a burger menu text option. You can toggle this on,  in the Header tab of the Divi Switch settings screen. Just type the text you want to display next to the hamburger icon and save the changes. I’ve added the word “Menu”.

Add your customization in the “Burger menu text” field

Refresh your website and the text will appear next to the hamburger icon. Here’s my example, showing the word “Menu” next to my double down icon.

Now you see the word “menu” next to the icon

Plus, Divi Switch includes +50 other design customizations and features you can implement on your site. Follow our other free how to’s and learn out to use:

A little CSS goes a long way with Divi but whether your beginner trying to build your first site DIY or a design professional trying to speed up site development an expansion plugin like Divi Switch goes a long way.

Let us know what you think…

With the built-in features, CSS, and plugins like Divi Switch the options are limitless. We would love to see your design or hear your thoughts. Tell us about it in the comments section below.

Enjoy!

Learn more about Divi Space by visiting their website.