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

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1362123
    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!

    #1362243
    David
    Staff
    Customer Support

    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;
    }
    #1362320
    Rob

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

    Thanks again,

    Rob

    #1362771
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.