Hi nylarosie,
You can change all these colors in the customizer with the premium version.
You can also use these CSS codes.
Menu background:
.main-navigation, .main-navigation ul ul {background-color: #fff;}
Menu color:
.main-navigation .main-nav ul li a, .menu-toggle {color: #585598;}
Site title:
.main-title a, .main-title a:hover, .main-title a:visited {color: #585598;}
Current menu item:
.main-navigation .main-nav ul li[class=”current-menu-“]>a:hover, .main-navigation .main-nav ul li[class=”current-menu-“].sfHover>a {color: #ffe17f;}
I hope it helps.
Hi, I can change the background color for the menu but please could you explain how to get the current menu item to change as this does not work if I change the color?
Current menu item:
.main-navigation .main-nav ul li[class=”current-menu-“]>a:hover, .main-navigation .main-nav ul li[class=”current-menu-“].sfHover>a {color: #ffe17f;}
Hi nylarosie,
Please try this code:
.main-navigation .main-nav ul li[class*=”current-menu-“]>a { color: #ffffff !important;}
Thank you, I tried the code but it did not have any effect.
@wpkoithemes please do you have any other suggestions?
Hi nylarosie,
Please try this code:
.main-navigation .main-nav ul li.current-menu-parent a { color: #585598 !important;}
It will change the submenu color also. To change the submenu color, add this:
.main-navigation .main-nav ul li.current-menu-parent ul a { color: #fff !important;}
I hope it helps.
Hi, Two codes together change the submenu colour to white. Without the top code but with the bottom one the submenu stays yellow.
The main menu does not change color at all.
In this case, please try to replace the top code with this:
.main-navigation .main-nav ul li.current-menu-item a { color: #585598 !important;}
The bottom code with this:
.main-navigation .main-nav ul li.current-menu-item ul a { color: #fff !important;}
Actually this did work partly
.main-navigation .main-nav ul li.current-menu-parent a { color: #585598 !important;}
.main-navigation .main-nav ul li.current-menu-parent ul a { color: #fff !important;}
The menu changed from yellow to purple on home page only but when I change pages, the current menu item is still in yellow and hovering over an item is still yellow.
The chils menu item does change color to white – so that bit is fine.
Is there a way to change the secondary menu color and hover color to a different co,or – not yellow?
Thank you for your continued help!
OK, since I cannot change the yellow hover color and current menu item color to a different color, I decided to make the header a dark color so that the yellow shows up.
I now need to find out how to change the color of the site title to white and themain menu items to white.
Can you suggest a solution? Thank you!
Hi,
You can use this code for the site title with Your own color code:
.main-title a, .main-title a:hover, .main-title a:visited {color: #fff;}
The code for the menu items sent earlier.
I hope it helps.
