[Support request] Navigation below header on mobile

[Michael]

Hi, using Sider css for left-side vertical navigation where Primary Navigation is set to Float Right.

On mobile and tablet I want Navigation to be Below Header.

Is that possible?

[Ying]

Hi Michael,

Try this CSS:

@media (max-width: 768px) {
.main-navigation {
    width: 100%;
}
}

Let me know if this is what you want 🙂

[Michael]

Thanks Ying,

That sort of worked but everything is offset to left instead of being centred and there is a big space under the cart and menu hamburger.

[Ying]

You have this CSS in your child theme which adds 50px top and bottom margin:
https://www.screencast.com/t/jgbZi6MBbRyG

You should give it a media query like@media (min-width: 769px) to limit it to desktop only.

Then add this CSS to align the logo to center and align the toggle to right.

@media (max-width: 768px) {
.inside-header.grid-container {
    justify-content: center;
}
button.menu-toggle {
    text-align: right;
}
}

[Author]

Posts