Good to hear it’s easier…I owe that user feedback 🙂
For the mobile menu, if you go to the theme options and click on the Navigation tab, you will get your colour options there for this. However, the one thing that still needs to be done as customization is the little mobile menu button. This is where you can copy the menu css and add it to the child theme style.css to override it.
In the /css/menu.css from line 3, you will copy most of everything between:
/* Main Menu Toggle */
…to
/* Navigation Menu */
In between that are the mobile button styling, so the parts you will only need to copy to the child theme are the sections that look like this:
.menu-toggle {
color: #fff;
background-color: #e6e6e6;
background-repeat: repeat-x;
background-color: #618b9b;
background-image: -moz-linear-gradient(top, #8db9c9, #618b9b);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#618b9b), to(#8db9c9));
background-image: -webkit-linear-gradient(top, #8db9c9, #618b9b);
background-image: -o-linear-gradient(top, #8db9c9, #618b9b);
background-image: linear-gradient(to bottom, #8db9c9, #618b9b);
}
Now these use css3 gradients, so you can either simply change the hex values you see there like: #8db9c9, #618b9b…etc, or you can use an online tool to create your gradient, copy the code, then paste to replace the css in the menu.css file. You can check out this one online to generate your gradient:
http://www.colorzilla.com/gradient-editor/
Or, you can just remove the gradient and use a background-color only if that makes it easier.
