Change when mobile menu activates

WARNING!

Please note that guides are just that, guides. Concerning customization guides we cannot assist with implementation at the one on one level and you instead may wish to hire a web pro for hands-on assistance.

1. Create a child theme.
2. Create a functions.php and cyberchimps-responsive.css in the child theme
3. Paste this code in the functions.php: https://gist.github.com/grappler/9216730
4. Copy the CSS from cyberchimps-responsive.css to the cyberchimps-responsive.css in the child theme.
5. Change the max-width: 979px in the second line to the point where you want the menu to display.

Here is an example of what the child theme for iFeature Pro 5 would look like:
https://github.com/grappler/cyberchimps-responsive-menu-child/archive/master.zip

NOTE 1: Please read the warning message at the top of this guide. Due to this guide involving file-level customizations it is not covered by support. If you need additional assistance with it, you may wish to hire a web pro

NOTE 2: Please read the quote from Development on why the mobile menu appears at 979px.

“We use Boostrap to create our layout solutions. So we use media queries to check for the width. In this case we are looking for 979px or less. So in portrait on a tablet the mobile menu should show but in landscape the normal menu should show. We have tested this on an iPad 4 and it works for us. The reason Bootstrap has decided to go to mobile view for the menu at tablet level is actually not only due to the lack of screen space but because tablets don’t have an agreed way to handle hovers, because the full menu works on hover to open up submenus the tablets cannot handle it. Some tablets will show the dropdown which means use lose the link of the parent link. Others go straight to the link and don’t show the dropdown. So whilst you potentially could re-write the media query to show the mobile menu at a smaller screen than a tablet you would then have the problem of your menu not working properly.”

Categories: