Adjust width at which menu collapses?

[nectarbridge]

I got a complaint from the people I was setting a site up for that "the menu disappeared," and initially thought they must have opened up the browser in a very small window. Turns out the min-width was at 1100 px, so a quite normal windowed browser can collapse the menu.

The initial reference is here in the CSS:

@media screen and (min-width: 1100px) { /* Primary Navigation */ .main-navigation { padding: 0; }

I've done some fairly crude, nasty things to the style sheet at each @media reference to sort of force the menu to be expanded until we get to a phone in portrait mode. I consider what I've done to be just a patch until I can get a better solution in place. Unfortunately I'm not the greatest at css.

Has anyone customized this style sheet or have any suggestions for best practices to make it:

• never collapse the menu in a PC or Mac browser, unless perhaps the width is ridiculously narrow?
• collapse the menu and force the sidebar under on anything smaller than a full-size tablet?

Thanks,

Gary

[devinsays]

Hi Gary. The menu is purposely set to collapse once the screen width is smaller than the max container with. This, of course, doesn't make much sense when there's only a few items in the menu and there's plenty of space. But it's required for those folks who have a lot of menu items and don't want them to take up multiple lines on a small screen.

You're welcome to customize this yourself with a child theme or custom styles. The media query for the media query is here: https://github.com/govfresh/govpress/blob/master/style.css#L1307. Feel free to customize that to something more appropriate for your specific site.