Return to previous page

Mobile menu - by jowjow - on WordPress WooCommerce support

This topic has 6 replies, 3 voices, and was last updated 6 years, 8 months ago ago by Rose Tyler

jowjow

Participant

March 27, 2018 at 14:35

How to make the mobile menu open from left to right?

Copied

5 Answers

Rose Tyler

Support staff

March 27, 2018 at 14:43

Hello,

Please try to add this code in Theme Options > Styling > Custom css > Global Custom css:

.header-wrapper header .container-wrapper {
    display:  -webkit-box;
    display:  -webkit-flex;
    display:  -ms-flexbox;
    display:  flex;
    -webkit-box-orient:  horizontal;
    -webkit-box-direction:  reverse;
    -webkit-flex-direction:  row-reverse;
        -ms-flex-direction:  row-reverse;
            flex-direction:  row-reverse;
}

.header-wrapper .navbar-toggle {
    right:  auto;
    left:  10px;
}

.mobile-menu-wrapper {
    -webkit-transform:  translate3d(-270px, 0, 0);
            transform:  translate3d(-270px, 0, 0);
    right:  auto;
    left:  0;
}

.mobile-menu-opened .template-content {
    -webkit-transform:  translate3d(270px, 0, 0);
            transform:  translate3d(270px, 0, 0);
}

Regards

Copied

mrsarajar

Participant

March 29, 2018 at 23:28

Hi, I tried to use this code and my mobile navbar was moved to the left, which I wanted. But somehow the Logo moved to the right and blocking the Cart & Wishlist Icon.

Also when I scroll down through the content, the navbar moved back to the right.

Can you help me?

Copied Theme version: 4.22 WooCommerce version: 3.3.4

Rose Tyler

Support staff

March 30, 2018 at 09:06

Hello @mrsarajar,

.header-wrapper header .container-wrapper, .et-header-full-width .fixed-header .container {
    display:  -webkit-box;
    display:  -webkit-flex;
    display:  -ms-flexbox;
    display:  flex;
    -webkit-box-orient:  horizontal;
    -webkit-box-direction:  reverse;
    -webkit-flex-direction:  row-reverse;
        -ms-flex-direction:  row-reverse;
            flex-direction:  row-reverse;
}
.header-wrapper .navbar-toggle, .fixed-header .navbar-toggle{
    right:  auto;
    left:  10px;
}
.mobile-menu-wrapper {
    -webkit-transform:  translate3d(-270px, 0, 0);
            transform:  translate3d(-270px, 0, 0);
    right:  auto;
    left:  0;
}
.mobile-menu-opened .template-content {
    -webkit-transform:  translate3d(270px, 0, 0);
            transform:  translate3d(270px, 0, 0);
}
.header-wrapper .header-logo, .fixed-header .header-logo {
    width: 100% !important;
    padding-left: 0px !important;
    float:  none;
    text-align:  center;
}
.fixed-header .header-logo img.logo-fixed {
  display: inline-block;
}
.global-header-hamburger-icon .fixed-header .navbar-header, .global-header-hamburger-icon .navbar-header {
    margin-right: 1em;
}

Regards

Copied

mrsarajar

Participant

March 31, 2018 at 23:11

It destroyed my desktop menu 🙁

Copied

Rose Tyler

Support staff

April 2, 2018 at 07:18

Hello @mrsarajar,

Please change the code to:

@media only screen and (max-width: 992px){
.header-wrapper header .container-wrapper, .et-header-full-width .fixed-header .container {
    display:  -webkit-box;
    display:  -webkit-flex;
    display:  -ms-flexbox;
    display:  flex;
    -webkit-box-orient:  horizontal;
    -webkit-box-direction:  reverse;
    -webkit-flex-direction:  row-reverse;
        -ms-flex-direction:  row-reverse;
            flex-direction:  row-reverse;
}
.header-wrapper .navbar-toggle, .fixed-header .navbar-toggle{
    right:  auto;
    left:  10px;
}
.mobile-menu-wrapper {
    -webkit-transform:  translate3d(-270px, 0, 0);
            transform:  translate3d(-270px, 0, 0);
    right:  auto;
    left:  0;
}
.mobile-menu-opened .template-content {
    -webkit-transform:  translate3d(270px, 0, 0);
            transform:  translate3d(270px, 0, 0);
}
.header-wrapper .header-logo, .fixed-header .header-logo {
    width: 100% !important;
    padding-left: 0px !important;
    float:  none;
    text-align:  center;
}
.fixed-header .header-logo img.logo-fixed {
  display: inline-block;
}
.global-header-hamburger-icon .fixed-header .navbar-header, .global-header-hamburger-icon .navbar-header {
    margin-right: 1em;
}
}

Regards

Copied