Follow us

Move the Divi Slide-In Menu to the Left - Tutorial for Divi | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

This one has been on the ‘to do’ list for quite some time and I know it’s something lots of you want to know how to do, so today I am going to show you how to move the default Divi Slide-In menu from the right hand side of the page to the left.

When I started this I thought I was going to have to edit some Javascript (which is not something I enjoy wink ), but it’s a lot simpler than it first appears, all we really have to do reverse the CSS already there.

 

So let’s get cooking!

Ingredients

 

Just default Divi, you don’t even need a child theme, although I do recommend it.

 

Cooking time

 

This should take you less than 5 minutes.

 

Preparation

 

Let’s set up the menu. 

Go to Divi > Theme Customiser > Header & Navigation > Header Format and select Slide-In from the drop down menu.

Move the Slide-In Menu to the Left tutorial for Divi

 

Method

 

The method for this is very simple. Just copy and paste the following CSS into your child theme stylesheet or Divi The Options custom CSS box.

All we are doing here is switching everything from right to left and reversing the slide-in animation and full comments are included. 

/*----------------------------------------------*/
/*-----Slide-In Menu from Left by Divi Soup-----*/
/*----------------------------------------------*/


/*Move the hamburger menu to the left*/

#et-top-navigation {
    float: left;
    padding-left: 0 !important;
}


/*Move the menu to the left when open*/

.et_pb_slide_menu_active header#main-header,
.et_pb_slide_menu_active #page-container {
    left: 320px !important;
}

.et_pb_slide_menu_active .et_slide_in_menu_container.et_pb_slide_menu_opened {
    right: auto !important;
    left: 0 !important;
}


/*Hide the screen overflow*/

body.et_pb_slide_menu_active {
    overflow-x: hidden !important;
}


/*Move the logo to the right of the screen*/

#logo {
    float: right;
}


/*Switch the slide-in animation from right to left*/

.et_slide_in_menu_container {
    left: -320px;
    -webkit-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
    -moz-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
    transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
}

 

This code moves the logo to the right but you don’t have to do that if you don’t want to, just replace this section of the above CSS:

#logo {
    float: right;
}

with this:

#logo {
    margin-left: 50px;
}

 

The code will move the menu on both desktop and mobile, but if you only want it on the left on desktop, just wrap it in a media query like this:

/*----------------------------------------------*/
/*-----Slide-In Menu from Left by Divi Soup-----*/
/*----------------------------------------------*/


/*Move the hamburger menu to the left*/

@media only screen and (min-width: 981px) {
#et-top-navigation {
    float: left;
    padding-left: 0 !important;
}


/*Move the menu to the left when open*/

.et_pb_slide_menu_active header#main-header,
.et_pb_slide_menu_active #page-container {
    left: 320px !important;
}

.et_pb_slide_menu_active .et_slide_in_menu_container.et_pb_slide_menu_opened {
    right: auto !important;
    left: 0 !important;
}


/*Hide the screen overflow*/

body.et_pb_slide_menu_active {
    overflow-x: hidden !important;
}


/*Move the logo to the right of the screen*/

#logo {
    float: right;
}


/*Switch the slide-in animation from right to left*/

.et_slide_in_menu_container {
    left: -320px;
    -webkit-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
    -moz-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
    transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
    }
}

/*----------------------------------------------*/
/*---End Slide-In Menu from Left by Divi Soup---*/
/*----------------------------------------------*/

 

 

And that’s it, pretty simple eh? 

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!