[Resolved] Re-order Mobile Header Items

Home Forums Support [Resolved] Re-order Mobile Header Items

Home Forums Support Re-order Mobile Header Items

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1299419
    Zach

    I’m stuck trying to get the header items re-arranged in a specific order for the mobile menu and would love some help. Right now, I’ve got it set so that my site title is displayed on mobile instead of the logo, and the header order from left to right is -> Site Title, Search, Hamburger Menu (link below).

    https://drive.google.com/file/d/1udGzfwG-AIntM7VR3wnVgHb9kvTMnf0m/view?usp=sharing

    What I’m trying to do is center the title in the header, set the search set to the left, and set hamburger to the right.

    #1299763
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any chance you can link us to your site? That will help us provide you with specific CSS that should work the first time around.

    Let me know 🙂

    #1299775
    Zach

    Apologies, should have added that to begin with! It’s added now.

    #1300122
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS to your site:

    #mobile-header .mobile-bar-items {
        order: -1;
    }
    #mobile-header .navigation-branding {
        margin-left: auto;
    }
    #1300531
    Zach

    Thanks David, the menu looks great now!

    One small thing I noticed is that when you click the search bar, the close icon is set to the left now and over the text where you start typing. What would move it to the far right?

    #1300800
    Leo
    Staff
    Customer Support

    Have you resolved this?

    This is what I’m seeing:
    https://www.screencast.com/t/ArpClle4oo90

    #1300934
    Zach
    #1300939
    Leo
    Staff
    Customer Support

    Are you using browser resizing?

    Just checked with Chrome simulator and my phone and the result looks correct.

    #1300946
    Zach

    I’m using the chrome mobile simulator (iPhone X) and my actual iPhone (x) to view. On both devices I see the same result where the clear search icon is on the left side.

    #1301258
    Tom
    Lead Developer
    Lead Developer

    Hmm, I’m not seeing that either. All caches cleared? Same thing in a different browser?

    #1301302
    Zach

    I’m seeing the same thing across Safari, Chrome, and Firefox (the latter of which I just downloaded). I’ve cleared the server cache, and even tried hitting the homepage and appending “?3” “?4”, etc… as random numbers to ensure it’s not serving me a cached page and still get the same result where the “x” to close the search is on the left.

    #1301615
    David
    Staff
    Customer Support

    Try also adding this CSS:

    #mobile-header .mobile-bar-items {
        position: unset;
    }
    #mobile-header {
        position: relative;
    }
    .mobile-bar-items .close-search {
        position: absolute;
        right: 0;
        top: 0;
    }
    #1301977
    Zach

    That did it! Thanks for the help, you guys are awesome!

    #1301987
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.