1. Including your multi-colored logo as a menu item.
While it is possible in HTML to use a span to color individual letters in a string of text. There is nothing that I'm aware of that lets you color one part of a letter & not the other. as you do in the "i".
You may be able to do some magic by creating your own font, but even then the CSS style sets the font properties.
This leaves you with using an image, (perhaps defined as a SVG).
Or as you have done. just use a Logo in your header.
2. Changing the Navigation Font color
In most Themes, font color is not avaiable in the Themes / Change Font / Font Navigation Section.
So you need to use Themes / Edit HTML CSS
In the new V2.0 Themes.
Edit: STYLES: variables_light.less or variables_dark.less (depending on if you selected the light or dark variation.
then edit the variable @fill: #000000 & make it whatever colour you want eg: #0000FF for blue
In the older themes:
Edit: STYLES: main.less
For main nav search for NAV. Then scoll to
.menu a {
color: #3b3b3b;
}
Change as desired.
For Sub menu nav search for NAV. Then scoll to
#wsite-menus .wsite-menu li a {
font-family: 'Lato-light', sans-serif;
font-size: 12px;
color: #3B3B3B;
font-weight: 700;
text-transform: uppercase;
padding: 10px 0 !important;
background: rgba(255, 255, 255, 0.7);
border: none;
}
Change as desired.
Most themes use the same font color for the Mobile menus. So you shouldn't have to change that. But if you do, keep looking for NAV in the tags & eyeball to see if they are setting any Color attributes.
How this helps
Dave
