changing font color of drop down menu in twenty twelve

  • Resolved dwarsliggersschrijven.nl

    (@dwarsliggersschrijvennl)


    11 years, 4 months ago

    Hi there,

    I’m a novice wordpress user and recently succeeded in changing the font colors of the main navigation menu when hovering in the twenty twelve theme. In order to keep the parent hover color the same when navigating the drop down menu I added the following code using Appearance → Custom Design → CSS editor:
    .main-navigation li:hover a {
    color: #DD1870;
    }
    But I just cannot solve the following issue (despite trying firebug and reading many many past forum posts), so I hope someone can give me a suggestion to solve it. So what I would like is to swap the colors of the drop down menu when activated (which now is this pink color) to the color when you hover over it (a grey color) and vice versa. So that the net result is the grey font when the drop down menu is shown ( which in my particular case is by hovering over the main navigation tab “po?zie”) whereas if you hover over the drop down menu items the font turns pink.
    My website is: dwarsliggersschrijven.nl
    Any help is greatly appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)

  • I can’t really test this, but I think it is the style that is set for the drop-down items is: 

    .main-navigation li:hover a {
     color: #DD1870;
}

    this rule would apply to your drop down menu as well as the main navigation because it does not specify which li:hover a, so it applies to all of them, even the drop-down.

    There are a lot of ways to override this, here is one:

    .main-navigation .children li a {
     color: #444;
}

.main-navigation .children li:hover a {
     color: #DD1870;
}

    This specifies to change the color of the li a of the class “children”, which is set in the
    ul element of the drop-down. I hope this makes sense, let me know if I can clarify it for you or if it doesn’t work.

    Thread Starter dwarsliggersschrijven.nl

    (@dwarsliggersschrijvennl)

    OMG, you’re a star!!! It works. Thank you so much for that :-))))

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘changing font color of drop down menu in twenty twelve’ is closed to new replies.