Assistance with menu and header v2

Hi there,

Can you link us to the page in question? To check and have a better idea of what you're trying to do.

Mockup images of how you want it to look on mobile would help tremendously as well.

You can use the private information text field to provide the site details. :)

Hi Elvin, I have no idea how to do an image mock up. If you view it on a mobile you'll see the problem.

Let's try to address a few things to try to make the layout look better.

First off, make sure to use media rule for things that you only want to apply on desktop and/or mobile.

Example: You have this CSS:

.site-logo {
    width: 150px !important;
}

This CSS attempts to apply this setting to all viewports. Since its a fixed value, while it may look good on desktop, it may not be the same case for mobile.

That said, we wrap things in @media rule so the style doesn't cascade down to other viewports.

@media(min-width:769px){
    .site-logo {
        width: 150px !important;
    }
}

And if we want to apply a different styling for mobile, we add something like this.

@media(max-width:768px){
    .site-logo {
        width: auto !important;
    }
}

This is actually related to why your menu bars are flex-wrapping to the next line.

To address the issue, try adding this CSS:

@media(min-width:769px){
    .site-logo {
        width: 150px !important;
    }
}

@media(max-width:768px){
    .site-logo {
        width: auto !important;
    }
form.aws-search-form.aws-show-clear {
    width: 80%;
    margin: 0 0 0 auto;
}
}

This part is optional: `form.aws-search-form.aws-show-clear {
width: 80%;
margin: 0 0 0 auto;
}`

As its sole purpose is to reduce the search field's size. You can keep and adjust it to your preference.

Nice work and thanks for the explanations. Very helpful. Is there a way to ensure the burger menu is always on the right side rather than wrapping?

In fact, what I'd really like is to have everything (logo|search|cart|menu) on a single line.

Try adding this CSS within the @media(max-width:768px){} rule.

.menu-bar-items {
    flex: 1;
}

That's brilliant. Thanks a bunch.

No problem. :)