[Theme: Twenty Eleven Child] How to remove that hover background in navigation?

To customise twentyeleven you must first create a Child Theme.

When you’ve done that you use Firebug or equivalent to find out the style rule(s) that need modifying and then you add style rule(s) to the end of your child theme’s style sheet to achieve what you want to achieve.

If you post a link to your site, we’ll be able to be a bit more specific. You might want to do that after creating your child theme.

HTH

PAE

I have already created child theme. Check my site at https://www.knowledgera.com

In your child theme’s style sheet, create a rule to override this:

#access li:hover > a, #access a:focus {
  background: -moz-linear-gradient(#F9F9F9, #E5E5E5) repeat scroll 0 0 transparent;
}

I think.

Cheers

PAE

But thats the problem, I tried but couldn’t override this code. I’ll be grateful to you if you give me the trick to override the same. ??
BTW thanks for your kind replies and time you spent.

The general rule is that the most specific rule wins. If two rules have the same specificity, the one that is loaded last wins.

What rule did you add to your child theme’s style sheet?

Cheers

PAE

I used the same rule and set gradients to match my navigation background. so while hovering it will give pseudo effect that there is no hovering background. But I want strong overriding rule. Can it be possible to do? Should I delete above mentioned code from my main theme style.css?

Not sure what the specific problem is from the posts above – maybe jsut me not reading it clearly.

The previous posters advice is good – you need to add the CSS for your child theme to the file “style.css” in your child theme folder NOT the style.css associated with the default Twenty Eleven theme.

I’ve styled my menu to suite my current needs by adding the following CSS to my child theme style.css folder – see if following the structure (with your own hex codes for colour helps)(you can see the results at https://www.riotstories.co.uk to check if that’s the sort of thing you’re after)

/* Change menu item bg colour and text colour when item hovered over*/
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #000000;
	color:#533e60;
}
/*set current marker styling for menu*/
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
	background:#533e60;
	background: -moz-linear-gradient(#0f0f0f, #533e60);
	background: -o-linear-gradient(#0f0f0f, #533e60);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f0f0f), to(#533e60)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#0f0f0f, #533e60);
	color:#ffffff;
}
/*Change gradient bg when menu item hovered over*/
#access li:hover > a,
#access a:focus {
	/*font-weight:bold;*/
	background: #0f0f0f; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#666666, #0f0f0f);
	background: -o-linear-gradient(#666666, #0f0f0f);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#0f0f0f)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#666666, #0f0f0f);
	color: #666666;
}

PS: something else to be aware of:

If you’re using the dark theme in Twenty Eleven the dark.css is loaded last so styles within it might overwrite some of your styles in your child style.css. The way around this is to add “!important” to the styles in your chil style.css file where necessary – this will ensure they take priority.

but what if I don’t want to use background while you hover on your navigation bar links. See this screenshot

https://awesomescreenshot.com/0c8pljdd4

Thanks for your kind reply.

PNT

In that case just use “none” as the background colout like this:

/* Change menu item bg colour and text colour when item hovered over*/
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: none;
	color:#533e60; (use the Hex code for whatever colour you want the menu text to be e.g. #FFF for white, #000 for Black etc)
}

Does that help ?

Hey you did it. I forgot one line while trying to solve it.

” #access ul ul :hover > a “

that was my mistake. Got a new thing today. Thanks to you both for helping me out of this query.

?? Great! Glad it worked out for you.

StevEBoy. Thanks a ton! Worked perfect for me.

One quick question.. I would like the dropdown to be the same color as the main menu. Right now it’s white, and the color changes as its rolled over which is perfect, but I need the white inactive link to be the same color as the main menu.

Can you help me with this please? I would greatly appreciate it!

Hi patmatt

I’m not exactly sure what you mean but since you say “dropdown” I’m assuming you have a menu with some sub-menu items and you want to change the colour of the dropdown with the submenu items when it first opens. If that’s what you’re after use this in your style sheet – if the colours don’t show add !important:

/*Change submenu dropdown colours*/
#access ul ul a {
    background: none repeat scroll 0 0  #F30;
    border-bottom: 1px dotted #DDDDDD;
    color: #FF0;
}

The hex code in the first line controls the colour of the dropdown background when it opens

The hex code in the second line controls the dotted line between submenu items – make it the same as the background to hide it or choose a suitable alternative colour to match your styling

The hex code in the third line controls the colour of the text in the drop down

Let me know if I’ve misunderstood what you were asking and maybe stick a link up and we can have another look.

Hope that helps a bit.

SteveEBoy,

Thanks a million! That’s exactly what I needed!

Works perfectly now!

A side question. Can you tell me why some changes wont take in the child .css but when I change them in the main .css they change? It’s as if the child .css is not overriding the changes of the parent.css. Some of them but not all of them.

I read somewhere where I’m supposed to purchase/upgrade but I cant find it anywhere. Could this be the cause? If yes, where in the world do I go to purchase/upgrade? I’m running the 1.2 version.