Q12: Move the Divi Slide-In Menu to the Left

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 ), 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.

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.

Michelle X