Please review my site

Gloria, review exactly…

.main-navigation li a:hover {
color: #efefef; /* very light gray */
}

Put the above in your Child Theme exactly as it is and be sure that is the only instance of that specific selector.

Not sure I put it in the right spot, here is what I have now

.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
.main-navigation li a:hover {
color: #efefef; /* very light gray */
}
{
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #000000;
}
.main-navigation a:hover {
color: #000000;
}

leejoseho:

I think we are talking about two different navs. I meant the nav menu at the top of my page: Catholic Travel guide home, destinations etc. I think what you are talking about is is shown on the right side of the page. Is that correct?

Since my post has been moved (my bad–I put in the wrong forum) I can show you my main website (I think it is OK). This is how I want my WordPress blog Nav menu to appear. I think it must be a simple change but cannot seem to get an answer that works.

That code changed that color for me in Twenty Twelve. Are you using Twenty Twelve? If so, put Twenty Twelve’s sheet and yours side-by-side and search for .main-navigation li a to see where another line might be having the final say or something…and that is as much as I know here!

I am using a child theme of 2012. Thanks for trying….it is probably something simple but when you don’t know anything about coding it is a mystery!

Gloria – that’s not a child theme – you should not have the entire parent theme stylesheet in the child theme. ONLY changes should be in the child theme.

The code you added is not working because you have a syntax error here:

/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li a:hover {
color: #000000; /* very light gray */
}
{
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}

See if fixing those brackets works.

Actually, I’m not sure that’s the only problem – I’ll look at it some more.

Thanks. Not sure why I have a syntax error although I am dangerous when allowed to access the code in any way. I will wait for your reply. Have to leave but be back in an hour just in case you answer right away you will know why I did not respond. Appreciate all your help.

Okay, the problem is that you’re changing CSS that doesn’t apply to regular sized screens – it needs to be inside a media query to do that.

So undo any changes you’ve made to that section.

Then ADD this to the bottom of the style.css file:

@media screen and (min-width: 600px) {
    .main-navigation li a:hover {
		color: red;
	}

}

Obviously, change the color to what you want.

Dumb question here….where is the style css file?

Not sure I can un-do the changes I made because I don’t remember what was there before.

where is the style css file?

That’s what you have been changing.

Not sure I can un-do the changes I made because I don’t remember what was there before.

That’s why you should not be modifying theme files – I’m not sure what you’ve changed from the original, but try removing this piece exactly:

a:hover {
color: #efefef; /* very light gray */
}

Then go to the bottom of the file and add the code I posted above.

The above is what someone on this forum told me to ad.

Yes, I see that above – where you put it created a syntax error – and it won’t do what you want because it’s not inside a media query – which means (because of how twentytwelve is coded) it’s only applied to small devices – and in this case, small devices don’t use the same menu anyway.

Well I had no idea I was not supposed to make changes. I think I will quit while I am ahead. It works more or less, so some day when I can afford to hire a designer I will get it the way it should be. Thanks for trying to help.