Changing breakpoint for the mobile menu

Hi, I would recommend to create , a child theme for this.

In the functions.php dequeue the original stylesheet, you copy all contents of the original stylesheet to the stylesheet of your child theme and change the media queries in it to what you want it to be.

Thank you for your reply!

Indeed, this solution works. I get the result I want by replacing
@media screen and (min-width: 48em) {
with
@media screen and (min-width: 1000px) {
in the original stylesheet.

But it would also change other items than the menu, deprives me of future updates and makes long-term administration more complex.

So, I prefer fix this problem by modifying my child theme stylesheet.

• This reply was modified 4 years, 3 months ago by laboussole.

Yes, I mentioned to adjust the queries in the child theme (by copying the original stylesheet to your child theme stylesheet).

If you don’t dequeue the original stylesheet, the original media queries get loaded as well, and you don’t want that to happen I think. And if you dequeue the original stylesheet (which you do in the functions.php of your child theme), all files of the original theme stay are untouched so there is no extra administration there. You are using the child theme exactly to avoid that kind of issue.

Yes, I understood that you proposed to modify the child theme. I tried in the original stylesheet to check if it worked or not.

But with this solution, I should redo the copy at every update of the theme: there is extra administration. And this modification will not only affect the menu, but all transformations that now arrive at 48em. Also, it could create duplicates in the child theme stylesheet.

But with this solution, I should redo the copy at every update of the theme: there is extra administration.

Actually you don’t. I can’t imagine a case on why you would need to do that.

The child theme never gets affected when a parent theme is updated. And in my experiences parent theme updates barely changes things to the stylesheet. That’s a very bad practice as it would change the appearance of the website.

It’s the only solution I see. Alternatively I can imagine using a query of some kind, but that would even be more hacky if it works at all. Goodluck.

Ok, you are probably right on this point.

I tried your solution, but it overwrites some of my changes in the child theme stylesheet. So, I would have to find and remove all duplicates: it seems too complicated for me :/

What duplicates are you talking about?
The parent CSS is not supposed to load but when I visit your site, I see the parent stylesheet still getting loaded.(line 64)

The scenario would be

• in your functions.php dequeue the parent stylesheet (see the link in previous post on how to do that) so none of these styles appear on the front-end.

  The reason for this approach is because otherwise you wouldn’t be able to get rid of the old media queries.

• If you had already put some lines of css in the child theme stylesheet, temporary remove these (keep a notepad at hand where you can store these) and add/paste the lines at a later stage in an order where they work well.
• Next copy all the contents of the original stylesheet (except the theme info) to your child theme stylesheet. So now you have the original style appearance, like nothing happened FOR NOW.
• Now change the media queries in the child theme stylesheet you just copied to what you want it to be.
• Add the extra changes you want to make and place them somewhere in the child theme stylesheet where they would work best

Hope this clarifies it a bit. You have to dequeue the parent stylesheet, otherwise the original breakpoints also get loaded.

EDIT
And if there are items where you think the media queries are fine, then add your media query as an extra and move the elements you want (like the menu)to the new query container and leave all the other in the current container.

• This reply was modified 4 years, 3 months ago by Bianca.

The parent theme is still loaded because removing it breaks the layout of the site. After the attempt, I kept the configuration that works online.

Add the extra changes you want to make and place them somewhere in the child theme stylesheet where they would work best

This is the step I was thinking of when I write duplicates: the contents already modified in the child stylesheet. I would have to redo all of my changes, in the right place in the document. I’m afraid it will be complicated, and possibly cause errors if I do it wrong.

…because removing it breaks the layout of the site.

Ok that’s not supposed to happen, if you copied all contents of it to the child themes stylesheet. Sorry I’m out of options here. I can only suggest to try a different theme, although I understand your reason for choosing a standard theme very well. Maybe the new Twenty Twenty-one is an alternative?

Anyway goodluck. If there is something else let me know.

Ok, I understand. Thank you for all the time you have already given me!

• This reply was modified 4 years, 3 months ago by laboussole.