[Pro] Changing Individual Header Nav Bar Graphic Colors

Support
#1

Howdy! I’ve been trying to change the Inline Navigation graphic colors on a link by link basis but I’ve been unable to find how to target the graphics. For example, I want the color of the graphic on the About link to be different than the color of the graphic on the Contact link.

Thanks in advance!

#2

Hi @atjonesen,

Thanks for writing in.

Using custom CSS, you can change the inline navigation graphics color. Just don’t forget to add an id or class to the inline navigatio so you could specifically change its color.

If not working, please share us your admin credentials in a secure note so we could check your setup why it is not working.

Thanks.

#3

I am trying to accomplish the same but I am not using Pro. Is this possible with X.
I want to have different color for each link on the navigation.

Can you post how was this actually accomplished?

#4

Hi There,

Yes, you can do that with X using the ID of each of your menu items. Please add this to Theme Options > CSS

/*home*/
#menu-item-241 a {color: cyan;}

/*about*/
#menu-item-36 a {color: magenta;}

/*mamas progress*/
#menu-item-240 a {color: lime;}

/*Way Back When*/
#menu-item-266 a {color: yellow;}

/*updates*/
#menu-item-18 a {color: tomato;}

Feel free to change the color values.

Hope that helps,
Cheers!

#5

Thank you so much guys! This actually worked, but mu goal was to change the link color,

like when they hoover over home would change to cyan, and they hoover over about change to magenta.

Is this possible?

Lucy

#6

Hi Lucy,

Yes that is possible, simply add a pseudo-class :hover on the selector.

/*home*/
#menu-item-241 a:hover {color: cyan;}

/*about*/
#menu-item-36 a:hover {color: magenta;}

/*mamas progress*/
#menu-item-240 a:hover {color: lime;}

/*Way Back When*/
#menu-item-266 a:hover {color: yellow;}

/*updates*/
#menu-item-18 a:hover {color: tomato;}

Hope that helps,
Cheers!

#7

that worked! You guys are amazing!!! Can the line on top change color as well?

#8

Hi,

Yes, you can add a box-shadow property in the given CSS code.

/*home*/
#menu-item-241 a:hover {
	color: cyan;
	box-shadow: inset 0 4px 0 0 cyan;
}
/*about*/
#menu-item-36 a:hover {
	color: magenta;
	box-shadow: inset 0 4px 0 0 magenta;
}
/*mamas progress*/
#menu-item-240 a:hover {
	color: lime;
	box-shadow: inset 0 4px 0 0 lime;
}
/*Way Back When*/
#menu-item-266 a:hover {
	color: yellow;
	box-shadow: inset 0 4px 0 0 yellow;
}
/*updates*/
#menu-item-18 a:hover {
	color: tomato;
	box-shadow: inset 0 4px 0 0 tomato;
}

Hope it helps,
Have a nice weekend!