changing menu mobile collapse point

Hi Flyhead. You’ll probably also need to modify the @media queries in responsive.css. This thread discusses sidebars but includes copying that file to a child theme and how to enqueue it.

@bdbrown, thank you for responding to my post. The problem seems that in the responsive.css there is no markup for anything for any of the the nav classes.

Correct. But the relationship between the @media nav queries in style.css and the other @media queries in responsive.css is complex. Not to say that what you want to do can’t be done; just depends on how important it is and how much time you want to spend on it.

We have spent a lot of time in the site’s css and would not be giving up in fine-tuning this bit because of a little hardship. Would you mind enlightening me of this relationship please? Need to understand what I am doing before doing it.

I was thinking of the sidebars; sorry. Been a while since I looked at the menus so it may be that you only need to change the nav queries in style.css. It looks like there are 4 of them:
line 480 – common
line 601 – topbar
line 647 – header
line 729 – footer
I changed them all and ran it on a test site and it seemed to work fine. Let me know if you still have problems.

We did before posting the initial question, but the lines are different in our own style sheet:
337 common
465 topbar
554 nav-header
The footer nav does fine after adaptation so we are leaving it out here.

The original issue remains.

The problem is still there. We really need help.

What version of the theme are you running?

1.5.4

I just installed a fresh copy of v1.5.4. The relevant @media queries in the default theme style.css are:
line 477 – common
line 598 – topbar
line 644 – header
Those would all be set to 960px.

In addition, the following lines:

@media only screen and (max-width: 719px)

should be changed to 959px:
line 513 – common
line 620 – topbar
line 665 – header

The menus collapse and the menu icons are active at 960px.

We are still in square one here. As said, we have changed that in our own css style sheet. Unless what you have done is to have modified the css in Hueman stylesheet itself.

Yes, I modified the parent theme style.css file just as a proof of concept. and it works as expected. However, apparently media queries do not act like normal css selectors. Although theoretically you can override a media query in a child theme, you need to use the same media criteria and target every selector in the original query. In your case you’re essentially adding new media queries to your child theme while the original media queries in the parent theme are still active. For whatever reason, they don’t work “logically” and activate when it appears that they should, but they follow some unknown criteria for determining which is active when. I spent a couple of hours testing various configurations of media queries and break points in a child theme but didn’t have any success. So, from what I’ve been able to determine, there are two options, neither of which is ideal:
1. Change the media queries in the parent theme.
2. Copy the media queries to a child theme, change them there, then delete them from the parent theme.
Either way you’re going to be stuck with changing the parent theme css whenever you upgrade the theme.

Thank you for spending time in this. I guess that’s something the developer really have to look at. Or someone in coding a new generation of HTML. We have basically given up following proper practice and modified the parent theme, like what you have now found out too. We feel very bad about it but that’s the restriction right now.

Screen definitions of popular devices are changing very rapidly. The existing way we rely on lengthy @media scenarios in the css really is not catching up with such changes. More so that there must be something in the core of HTML that we are not conforming to for such bug to happen.

Yep, agreed; hard to keep up with the pace of changes. Sometimes you just have to bite the bullet and go with what you know isn’t “best practice” just to get the job done. There are several articles that discuss alternatives to media queries. Who knows what the WC3 will dream up next.
Good luck with your site.

Thanks for the info bdbrown, I was also wanting to change the breakpoint and I guess we’ll have to deal with changing the main stylesheet as this is the only way it works.

And don’t forget to change the search toggle (in responsive.css) as well or it won’t show up with your new breakpoint.

@media only screen and (max-width:959px) {
.toggle-search {right:auto;left:0;top:0;-webkit-box-shadow:1px 0 0 rgba(255,255,255,0.1);box-shadow:1px 0 0 rgba(255,255,255,0.1);}
.search-expand {left:0;right:auto;top:50px;width:320px;}
}