Change ShopIsle header menu and menu item color

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

If you would like to change the color of the navigation/menu bar and its items from the header, this doc should help. 

ShopIsle Pro

It is pretty easy to change the colors in Pro themes. Go to WP-admin > Appearance -> Customize -> Colors. Choose the colors as per your requirements for navigation. And, That's it! Here are three color options available for navigation :

What is the Difference Between Shop Isle and ShopIsle Pro?

ShopIsle Lite

ShopIsle lite version does not have options to change the colors. So it will require some custom codes. Navigate to  Appearance -> Customize -> Additional CSS and add the following code according to your preferences:

• Change the background color:

nav.navbar.navbar-custom { 
	background: #167ac6 !important;
}

• Change the Menu Items Color:

.navbar-custom .nav li > a{
	color: #000;
}

• Change the background color and text color of the sub-menu items:

 nav.navbar.navbar-custom .sub-menu a{
	background: #fff !important;
	color: #167ac6;
}

Note: The color: #167ac6; value is addressing the text color from inside the sub-menu item's box. 

• Change the color of the hover effect on the sub-menu item (which is by default #fff = white).

nav.navbar.navbar-custom .sub-menu a:hover{
	color: #0091ff;
}

Save your changes, and you're done! You can change the Hexadecimal color codes by using this website:  http://www.hexcolortool.com/. After you've chosen your hexadecimal code for your desired color, you can simply change the values of the code above with your own hex-code. For instance background: #167ac6 !important to background: #ffff00 !important and the color will become yellow.