Force secondary nav on tablet to be hamburger menu like mobile

Hi there,

try this CSS:

@media (max-width: 1024px) {
    .secondary-navigation .menu-toggle {
        display: block;
    }

    .secondary-navigation ul,
    .secondary-navigation:not(.toggled) .main-nav>ul {
        display: none;
    }

    .secondary-navigation .inside-navigation {
        flex-direction: column;
    }

    .secondary-navigation .inside-navigation .main-nav {
        width: 100%;
    }
}

Adjust the @media (max-width: 1024px) px value to suit the size tablet you want it applied to

That still doesn't seem to work, but I'll keep tinkering with it. Thanks for giving me a place to start.

Hi Glenda,

I just tested David's CSS and it works well.

Can you make sure the CSS has been added correctly to your site?

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know :)