Changing breakpoint of responsive menu

Hello! I’m having a hard time finding the right override media queries to get the mainnav menu to stay put on tablet sizes and only switch over to the btn & mobi menu on phones. I think my issue is that I don’t understand how the switch from #mainnav to #mainnav-mobi happens. (The site I’m working on is http://authenticwholistic.com)

I tried the override below (among many, many others :slight_smile: in my child theme’s custom.css with no luck, it just makes all the menus disappear within those parameters.

Can you point me in the right direction? Thanks! p.s. Wonderful theme, thank you for sharing it.

@media only screen and (min-width: 480px) and (max-width: 1290px) {
#mainnav {
display: block !important;
}
#mainnav-mobi {
display: none !important;
}
.btn-menu {
display: none !important;
}
}

Hi,

There is a javascript function which is also control menu, it is located inside theme folder / js / main.js. After changes, use some minifying tool like http://jscompress.com/, compress the file and save it over main.min.js file in same folder.

Best Regards

I have the same problem. But making that change will not be replaced at the next update of the theme?
Am I forced to create a child theme? Wouldn’t it be better to have an option or parameter in the theme settings?

@erasmonet

Hello there, yes it would be better to have such an option inside theme options, but unfortunately, theme is not developed like that, so you will have to make changes manually inside mentioned file.

Since template file inheritance only work for WP template files, this file will not be overridden from child theme, and including it inside child theme will require to dequeue script from main theme, and to enqueue modified one.

This is not so easy if you are not experienced enough so it would be easier for you to make modifications on main theme, to save modified file somewhere on your PC, and to replace it again after theme update.

All the Best!