Re-order Mobile Header Items

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 :)

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

Hi there,

try adding this CSS to your site:

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

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?

Have you resolved this?

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

Hi Leo,

Strange, my view looks different - https://drive.google.com/file/d/1DkELedOTLx_JWuS_XZC1CiKXHyG2Ci0G/view?usp=sharing

Are you using browser resizing?

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

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.

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

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.

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

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

Glad we could be of help