Navigation below header on mobile

Hi Michael,

Try this CSS:

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

Let me know if this is what you want :)

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.

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