WordPress.org

Forums

[resolved] [closed] [Theme: Twenty Eleven Child] How to remove that hover background in navigation? (20 posts)

  1. Prerak Trivedi
    Member
    Posted 3 years ago #

    I am on twenty eleven. Want to remove that background while hovering on navigation menu.

  2. peredur
    Member
    Posted 3 years ago #

    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

  3. Prerak Trivedi
    Member
    Posted 3 years ago #

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

  4. peredur
    Member
    Posted 3 years ago #

    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

  5. Prerak Trivedi
    Member
    Posted 3 years ago #

    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.

  6. peredur
    Member
    Posted 3 years ago #

    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

  7. Prerak Trivedi
    Member
    Posted 3 years ago #

    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?

  8. SteveEBoy
    Member
    Posted 3 years ago #

    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 http://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;
    }
  9. SteveEBoy
    Member
    Posted 3 years ago #

    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.

  10. Prerak Trivedi
    Member
    Posted 3 years ago #

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

    http://awesomescreenshot.com/0c8pljdd4

    Thanks for your kind reply.

    PNT

  11. SteveEBoy
    Member
    Posted 3 years ago #

    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 ?

  12. Prerak Trivedi
    Member
    Posted 3 years ago #

    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.

  13. SteveEBoy
    Member
    Posted 3 years ago #

    :-) Great! Glad it worked out for you.

  14. patmatt
    Member
    Posted 3 years ago #

    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!

  15. SteveEBoy
    Member
    Posted 3 years ago #

    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.

  16. patmatt
    Member
    Posted 3 years ago #

    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.

  17. SteveEBoy
    Member
    Posted 3 years ago #

    Great news - glad it worked out.

    Have you added the "!important" after your colour declarations? In the Codex section on child themes there's specific mention of the Twenty Eleven dark theme .css being loaded after the child .css and so perhaps taking precedence sometimes. The advice is to use "!important" like this:

    #site-title a {
        color: #009900 <strong>!important</strong>;
    }

    The syntax matters - the !important goes before the ";"

    I'd suggest ensuring you try that first. Having said that I've had 1 instance so far where that didn't work for me - I'm using the dark theme in Twenty Eleven and nothing I did would take precedence over the dark.css for this partucular page element but it was quite minor so not a big problem. Very odd.

    Not sure what advice you're being given about having to purchase/upgrade (purchase or upgrade what exactly) but I'd advise caution - can't see how purchasing or upgrading something is going to help with this query.

  18. SteveEBoy
    Member
    Posted 3 years ago #

    PS: In the code example the tags are not required - I put them in to draw attention to the need for the !important in that position :-)

  19. patmatt
    Member
    Posted 3 years ago #

    SteveEBoy,

    Thank you very much for all of your help!

    Greatly appreciated!!

  20. SteveEBoy
    Member
    Posted 3 years ago #

    Thanks, you're welcome

Topic Closed

This topic has been closed to new replies.

About this Topic