[Resolved] Menu hidden on mobile but off canvas still work

[David]

Hello

How can I remove/hide the primary menu on mobile (white bar underneath header), but for it still to work show when called via the header block element that opens up the off canvas menu on mobile…

https://staging.howardandsons.co.uk/uk-sales/

Thanks
Dave

[Leo]

Hi Dave,

but for it still to work show when called via the header block element that opens up the off canvas menu on mobile…

Has this part been done?

[David]

Hi Leo,

No I haven’t, please see image…

https://ibb.co/7k22kWR

The menu below the header needs to be hidden, if I hide this via css, it stops the off canvas menu in the mobile header (next to the logo) from working.

Thanks
Dave

[Fernando]

Try adding this in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    nav#site-navigation {
        display: none;
    }
}

[David]

That’s great thanks, can you also help me center align the secondary menu items on this page, when viewing on mobile…

https://staging.howardandsons.co.uk/uk-sales/

[Ying]

Try this CSS:

nav#secondary-navigation.toggled .main-nav > ul >li {
    text-align: center !important;
}

[David]

Perfect, thank you 🙂

[Ying]

You are welcome!

[Author]

Posts