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

[Kiril]

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 –

Thanks in advance

[David]

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;
}

[Kiril]

That was perfect.

Awesome. thanks a lot

[David]

Glad to be of help

[Author]

Posts