Archived topic

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

3 replies · Started by Rob on July 13, 2020

Viewing posts 1–4 of 4

July 13, 2020 at 8:11 am #1362123

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!

July 13, 2020 at 9:52 am #1362243

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

July 13, 2020 at 11:09 am #1362320

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

Thanks again,

Rob

July 14, 2020 at 12:56 am #1362771

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.