[convey]

Hi again, I think I figured this out on my own… I adjusted the custom CSS to the following:

@media screen and (min-width: 701px) and (max-width: 990px) {
.nav-primary { display: block; }
#mobile-header-left-menu.mobile-menu-anchor { display: none; }
}

This leaves the existing breakpoint at 700px alone (which is where our menu no longer looks good on smaller windows), while having the full-size primary menu up to the 990px breakpoint (and beyond).

This seems to be working fine on the live site, but if you have any advice on better practices or potential pitfalls, please let me know.

Thanks again.

[convey]

Thank you very much for the reply.

That is a step in the right direction. Now the primary menu stays active as the window shrinks.

However, it now stays active for all sizes, even the smallest devices.

Could it be because this custom CSS comes at the very end? Perhaps the original CSS which handles the responsiveness to window size has to be in a specific order?

If there’s any logic I can add here at the end, to keep the mobile-friendly menus below a specified size, please let me know.

[Author]

Posts