I've been asked,
I hope you can help! How do I replace minimum pro's mobile menu with the more structured beautiful pro mobile menu?
In this article I show how the hamburger mobile responsive menu in Minimum Pro can be improved using the code taken from Beautiful Pro.
Versions of the child themes used:
Minimum Pro: 3.0.1
Beautiful Pro: 1.1
Before:
After:
Step 1
Replace the full code in js/responsive-menu.js with the one from Beautiful Pro i.e., the following:
Hi, Thanks looks great in minimized window on my Browser, But
nav didn’t change on the Iphone 4s. Still the old nav. I have installed the latest OS update.
http://test.lordbyronshoney.com/wild-flower-honey/
thx
cate
I checked your site in iOS simulator and see the hamburger menu fine: http://d.pr/i/18bJK
Also checked in Google Chrome’s device emulation and it’s fine: http://d.pr/i/1jQr1
You may want to add this in style.css: http://d.pr/n/1kpQC
Thanks for a great and simple tutorial. I was able to get this running in no time! I do have one question: where would I begin to be able to expand this to making sub menus expandable / collapsible? I found an article here that had a method for incorporating sub menus, but it uses a different JS / CSS method than the current Beautiful Pro style menu. Any suggestions?
The sub menus should already be expandable and collapsible. Can you provide the URL of your site?
Apologies, you are correct. I was referring to Menus nested 3+ deep. The first submenu does expand/collapse. The second, however, does not. My site is here. Would it just be a process of creating a style for the 2nd submenu that gives it the same class as the first tier of menu items?
Many thanks for this, a great help. Quick question how do I change colour of Hamburger icon?
Try setting the color property for
.responsive-menu-icon::beforein style.css.I found the issue .responsive-menu-icon::beforeis actually an id my additional stylesheet I had done it as a class.