How to style topbar with background color & font color?

[drweyant]

Greetings,

How would we style the topbar with background color & font color?

Thanks in advance,
drweyant

[sharmstr]

Hello. Its been discussed several times. Searching would have taken you here: https://archived.seventhqueen.com/forums/topic/is-it-possible-to-change-top-menu-color

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[drweyant]

Hi, thanks! I have actually been searching for two days as time permitted for “topbar color” “top bar color” “top bar styling”, etc. It isn’t referred to as “top menu” anywhere in the official Kleo documentation, so didn’t occur to me to use that search term. I appreciate your help! Have a great day.

[sharmstr]

Ahhh. Right. Okay. Glad you sorted it.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[drweyant]

sharmstr, I hate to bother you again. I can’t ask this in the thread you referenced above, as it is closed to further discussion.

I added the following to the CSS pane in the Kleo theme controls (General) as instructed in that thread, and saw no difference at all in frontend styling after cache clear, etc.:

#top-menu li a{color:#800000;}
#top-menu li a:hover{color:#7F7F7F;}

I am assuming this is supposed to address the styling of the full topbar background color & highlight color (which is what I need). Am I correct, or is this just addressing the text color? Either way, I really do need further assistance. I’m just not getting it. Any assistance at all would be most helpful.

Thanks again,
drweyant

[sharmstr]

Can I get a link to your site?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[drweyant]

Yes, thank you! http://untci.org/

[sharmstr]

Add this css. Dont change the colors until you look at it and see what css you need to change to get the color you want in the place you want.

COPY CODE

.header-color {
	background-color: yellow !important;
}

.top-bar {
	background-color: green;
}
.header-color .top-menu li > a, .header-color #top-social li a {
	color: red;
}

.header-color .top-menu li > a:hover, .header-color #top-social li a:hover {
	color: blue;
}

Let me know if that works for you.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[drweyant]

Thank you SO MUCH, sharmstr – that did it! 🙂 We are a non-profit and have to figure most of these details out on our own. So grateful you took the time. Have a great day.

[sharmstr]

No problem. Feel free to ask away. And please mark this resolved.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts