Thanks for using Mission News!
I’m afraid this type of customization is very messy and complex. Would be a few hundred lines of CSS to place into the Additional CSS section in the Customizer.
Is the issue that the current menu isn’t fitting the screen well at 800px? If so, reducing the size of the menu items is easy and can help:
@media all and (min-width: 800px) and (max-width: 960px) {
#menu-primary-items a {
font-size: 12px;
}
}
That can be copied & pasted into the “Additional CSS” section in the Customizer (Appearance > Customize).
Thanks for the help! The idea was to make the mobile menu essentially replace the normal menu up to 960px but that sounds like a big task. I thought it would be one row of CSS.
It’s because the desktop menu spills into two rows on smaller desktops and I wanted to prevent it doing that. Not sure if there is a way to tell WordPress to display less menu items per screens size?
Okay I understand. I think in this case the CSS snippet I shared would actually work very well. Decreasing the font size will make all of the menu items smaller and then more of them can fit on one line. The way that code is written, it will only affect visitors whose screen is between 800-960px wide.
The reason why the other change is difficult is because we have to override the CSS rather than editing it directly, so that means copying and pasting tons of menu code over and checking all the media queries carefully.
