Archived topic

Wonder how can I achieve specific MOBILE Menu Layout for WooCommerce ?

3 replies · Started by Kiril on December 2, 2019

Viewing posts 1–4 of 4

December 2, 2019 at 8:41 am #1089972

Hi there,

I am trying to re-create some MOBILE only WooCommerce menus, but I am having hard time achieving it.

Can you let me know how I can achieve any of these 3 examples here - MOBILE HEADERS

Thanks in advance

December 2, 2019 at 10:17 am #1090185

Hi there.

#3 pretty simple to do something similar:

1. Enable the Mobile Header in Customizer > Layout > Header.
2. Enable navigation search in Layout > Primary Navigation.
3. Add this CSS:

#mobile-header .menu-toggle {
    order: -2;
}
#mobile-header .mobile-bar-items:not(.wc-mobile-cart-items) {
    order: -1;
    margin-right: auto;
}

#mobile-header .navigation-branding {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    margin-left: 0;
}

December 2, 2019 at 10:27 am #1090197

That was perfect.

Awesome. thanks a lot

December 3, 2019 at 2:40 am #1091248

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.