Change the color of dropdown menue

franziskalehmann · Member · Dec 5, 2014 at 10:48 am
Copy link

Add topic to favorites
hey dear wordpress-team,
dear users,
i would love to change the background color of my dropdownmenue. it’s black right now and i just don’t like it. but i couldn’t find any well working hint in the forum right now.
could you please help me?
I’m using the theme “forever”.
greetz franzi

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 5, 2014 at 8:34 pm
Copy link
To change the base color of the submenus (nothing hovered) add the following and adjust the color as desired.
```
#access ul ul {
    background: #cc0000;
}
```
franziskalehmann · Member · Dec 7, 2014 at 4:21 pm
Copy link
Oh thanks for your quick and helpful answer. it worked!
but the head of each dropdown and the one where my cursor is at are still black. which attribut do i need to change for that? is it the one you call “hovered”? and how does that work?
greetz franzi
franziskalehmann · Member · Dec 7, 2014 at 4:25 pm
Copy link
oh and how to change the font colour of the dropdowns? it’s white right now and if i choose a light colour for the background it’s almost invisible…
thanks a lot for your time and help in advance!
greetz franzi
thesacredpath · Member · Dec 8, 2014 at 8:45 pm
Copy link
To change the hover background color on the top level menu items, add the following and adjust the color.
```
#page #access li:hover > a {
    background: #000;
}
```
To change the non-hover color on the text in the submenu items, add the following and adjust the color.
```
#access ul ul a {
    color: #CCC;
}
```
thesacredpath · Member · Dec 8, 2014 at 8:47 pm
Copy link
And actually, you mention going light on the background colors for the menu items, so instead of the first above, add this instead, which also includes the hover color for the text.
```
#page #access li:hover > a {
    background: #6495ed;
    color: #fff;
}
```
franziskalehmann · Member · Dec 11, 2014 at 10:00 am
Copy link
Oh great! It is working very well! Thank you so much for your help! You made my day! =)
Have a nice week.
Greetz Franzi
franziskalehmann · Member · Dec 11, 2014 at 10:36 am
Copy link
Oh and may I ask one last question.
How can I change the background and the font color of the menue-item I clicked on. This one still has a strange combination of colors.
Thanks a lot!
Franzi
franziskalehmann · Member · Dec 11, 2014 at 10:43 am
Copy link
oh and is it possible to change the font (style of lettering) of the menue and the sidebar menue into the same font (style of lettering) like in the normal text?
Greetz Franzi
thesacredpath · Member · Dec 11, 2014 at 5:13 pm
Copy link
I took a look in your customizer and see you have the same font set for headings and body. Is that what you wanted?

To change the color of the menu item text, add the following CSS and adjust as you desire. (excuse my red demo color)
```
#access a {
color: #cc0000;
}
```
franziskalehmann · Member · Dec 12, 2014 at 11:29 am
Copy link
thanks for your red help =)
unfortunately it wasn’t what i ment.
hmmm…how to explain correctly…when i’m clicking at the menu, the actual chosen item will appear in special color. in my case it gets a lightgrey background and a darkgrey font color. and even the dropdown menu of the clicked item appears in a grey color. And I would love to change that. is that possible?

and the font style question: in my understanding the headings and body are parts of the “general” text part. heading = head line, body = the text part itself. does it include the primary menu/dropdown menu and the sidebar too? for me it looks like all parts have a different font style…

thanks so much for your patience.
greetz franzi
franziskalehmann · Member · Dec 12, 2014 at 11:33 am
Copy link
ah okay…i was playing again a bit with the css-options for font style and now i think i understand it…
the settings for headings are completly just for the headlines but the settings for body are for all other texts, including the menu and the sidebar. isn’t it?
franziskalehmann · Member · Dec 12, 2014 at 11:43 am
Copy link
yes i think that answered my second question =)

about my first question: if you go there https://energiesuffizienz.wordpress.com/bmbf/
and compare the dropdown menu of “forschungsprojekt” with the dropdown menu of “theorie” then you can see my “color problem”.
thesacredpath · Member · Dec 12, 2014 at 4:20 pm
Copy link
Ah, thanks for the examples. You can adjust the color of the text on the current page submenus with the following CSS.
```
#access li.current_page_item ul a, #access li.current-menu-item ul a, #access ul ul li.current_page_item a, #access ul ul li.current-menu-item a {
    color: #000;
}
```
dubaiquilter · Member · Dec 14, 2014 at 1:13 pm
Copy link
Hi I need help with changing the colour of the top menu of my blog
dubaiquiltersguild.wordpress.com

thank you
thesacredpath · Member · Dec 14, 2014 at 3:11 pm
Copy link
Hi @dubaiquilter, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum?. Many thanks in advance.
galois · Member · Dec 14, 2014 at 3:15 pm
Copy link
@thesacredpath: the new thread is here—-> https://en.forums.wordpress.com/topic/colour-change-of-fonts?replies=1#post-2171460

Cheers.
thesacredpath · Member · Dec 14, 2014 at 6:10 pm
Copy link
@galois, many thanks, and I have just responded for you.
galois · Member · Dec 14, 2014 at 7:28 pm
Copy link
No, not for me. For @dubaiquilter.
I was just helping with the link. :)
thesacredpath · Member · Dec 14, 2014 at 9:57 pm
Copy link
Ah, I seem easily confused today. :)

Thanks.

No items found.