Menu Font Color Change

Hi Soder,
That is so exciting that you are making a step into doing something so special! A redesign and construction is amazing to the public!

Time for Business! So lets see in Main.css is where you will find the specific change to make.

You will need to change the original to this line of code:

<a href="https://amblesideskatepark.com/donate/" style="color: #ff0000;">Donate</a>

This is how the nav is set up right now:

header nav .menu{
	font-size: 1.3em;
	margin: 0 auto;
	display:table;
	border-top: 1px solid #AAA;
	border-bottom: 1px solid #AAA;
}
header nav .menu ul{
	list-style: none;
	text-align: center;
	margin: 0;
}
header nav .menu ul li{
	padding: 5px 1em;
	-moz-transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
header nav .menu ul li:hover{
	background-color: #AAA;
}
header nav .menu ul a{
	text-decoration: none;
	color: #686868;
}
header nav .menu ul a:hover{
	text-decoration: underline;
	color: #eee;
}
.menu-toggle{
	font-size: 2em;
	background-color: #AAA;
}

Should i be editing the following with your changes?:
<li class="page_item page-item-647"><a href="https://amblesideskatepark.com/donate/">DONATE</a>

[Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

Hi Esmi,
I apologize for telling him to edit the Themes CSS itself. I forgot about it, I am sorry again.

Thanks, Aaron.

OK. I have installed Simple Custom CSS plugin.

Simple Custom CSS plugin may slow the rendering of page. Try alternative methods.

SCCP uses querystring based css display, IMO.

Hi Soder,
Do you still need the assistance?

Hey Soder,

After Installing the Custom CSS.

Copy and paste this code into it.

.page-item-647 a:link, { color: ##FF0000!important; }
.page-item-647 a:visited  { color: #FF0000!important; }
.page-item-647 a:hover { color: #FF0000!important; }

I am sorry for not getting back to you. Also the color is already red and ready to go :-).

Hope this helps,

Thanks Aaron.