[Resolved] Centered logo with split nav, issue on mobile with search and WooCommerce basket

[Rob]

Hi team.

I have split the menu in two via your tutorial, and I also have search in navigation enabled as well as display cart in menu.

I then position the logo with top to make it appear below the menu.

It looks great on desktop, but on mobile the basket and search swap places, and because they are both in

and have margin-left: auto they are very spaced out, which leaves the search magnifier almost half way across the screen.

I have changed the margin, but I can’t seem to tighten them up closer together.

Many thanks!

[David]

Hi there,

try this CSS:

#mobile-header .mobile-bar-items:not(.wc-mobile-cart-items) {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
    margin-left: unset;
}

#mobile-header .main-nav {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
}

[Rob]

Perfect, thank you David, that did the trick. I never thought to use :not.

Thanks again,

Rob

[David]

Glad to be of help

[Author]

Posts