Menu Trouble Twenty Eleven Child Theme

Go to Dashboard > Appearance > Background and set it to white.

Hi friend,

I’m a little confused. What exactly did your site color scheme look like before?

Try changing the above code to the following and see if it’s the look you want:

#access {
background: #f1f1f1;
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5)
font-size: 12px;
border-top: 2px solid #69c;
border-bottom: 2px solid #69c;
width: 1000px;
}

#access a {
color: #69c;
font-size: 13px;
margin-left: 5px;
}

#access li:hover > a,#access a:focus {
text-decoration: underline;
font-size: 13px;
color: black;
}

#access .current_page_item > a,#access .current_page_ancestor > a {
font-size: 13px;
color: black;
text-decoration: underline;
}

Let me know if this is the look you want then I can help you tidy up the code a little more if you want.

Afzaal

Afzaal,

I copied your code directly into the code and still nothing has changed. Before my theme just had a white background with no gradient so that the menu looked just like the text on any other part of the website. Could this have something to do with the new “menus” widget that is in wordpress?

-PK

I don’t want any gradients when I hover over the links. For some reason I can’t get it to be black text with a white background.

Override this in your child’s style.css

#access li:hover > a, #access a:focus {background: white;}

Awesome that got rid of the gradient! Still can’t get the font to be black.

#access {
        background: #ffffff;
        background: -webkit-linear-gradient(#ffffff, #ffffff)
	color: black;
        font-size: 13px;
        border-top: 2px solid #69c;
        border-bottom: 2px solid #69c;
        width: 1000px;
}
#access a {
	background: #f1f1f1
        color: black;
        font-size: 13px;
        margin-left: 5px;
}
#access li:hover > a, #access a:focus {
	background: white;
        text-decoration: underline;
        font-size: 15px;
        color: black;
}
#access .current_page_item > a, #access .current_page_ancestor > a {
	background: white;
        font-size: 15px;
        color: black;
        text-decoration: underline;
}

Seems like it should be an easy fix

Seems like it should be an easy fix

Yes, everybody keeps saying that in the web industry.

Hi PK,

I’ve removed the background gradient color from “#access” and from “#access a”. Replace the code above in your comment with that below:

#access {
        background: #ffffff;
	color: black;
        font-size: 13px;
        border-top: 2px solid #69c;
        border-bottom: 2px solid #69c;
        width: 1000px;
}
#access a {
        color: black;
        font-size: 13px;
        margin-left: 5px;
}
#access li:hover > a, #access a:focus {
	background: white;
        text-decoration: underline;
        font-size: 15px;
        color: black;
}
#access .current_page_item > a, #access .current_page_ancestor > a {
	background: white;
        font-size: 15px;
        color: black;
        text-decoration: underline;
}

This should do the trick. Also, just a tip the reason why the font color wasn’t showing as black previously was because you missed a comma after the background color so the css didn’t pick up the font color correctly.

Hope this helps!

Afzaal