Top Bar Font Size Color

[nickzee]

Please add an option to the Theme Option for the Top Menu, aka Social Header, to change Font size, font color, and background color.

Thank you

[tmh23]

Agreed.

[sharmstr]

Please put your requests in the feature request topic. It gives the devs a single place to see what people want.

In the meantime you can do that easily with css

COPY CODE

#top-social i, .ts-text {
  color: red;
  font-size: 20px;
}

#top-social {
  background-color: black;
}

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

[tmh23]

I put this in the special CSS section and it works but only a portion of the top bar changes background color. How do you make the entire top bar change?

Troy

Attachments:

You must be logged in to view attached files.

[sharmstr]

It only changes a section because the original poster asked for the social part.

Change #top-social to .social-header.

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

[nickzee]

Actually, I meant the entire thing. I don’t have need to change just one section of the Top Bar, but the entire thing.

What is the official name of this section? The section containing the social and navigation elements together. It goes from the far left side of the screen to the far right and is at the very top. Is there a single name like “Top Bar” or something?

[tmh23]

Perfect! Thanks.

[tmh23]

huh… changing to .social-header doesn’t seem to have any effect.

[sharmstr]

Put important on it.

COPY CODE

.social-header {
  background-color: black !important;
}

@nickzee: The top bar includes The Social Links and the Top Menu.

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

[tmh23]

That works perfectly!

Thank you…. great support for this theme!!

[nickzee]

This fine for the background color. What about the font color?

Currently the color is set to….

COPY CODE

.header-color .top-menu li > a, .header-color #top-social li a {
  color: rgba(15,44,102, 0.5);
}

I have the Styling >> Header >> Link color >> set to #0f2c66 but the top bar is adding 0.5 opacity to the color which makes it look #6699CC (ie; rgba(15,44,102, 0.5)).

… and I do not see any way to change it. I need to change all of the text in the top bar to be a darker color.

I used this for the font size.

COPY CODE

.top-bar {
  font-size: 14px;
}

[sharmstr]

Put important on it

COPY CODE

.header-color .top-menu li > a, .header-color #top-social li a {
  color: rgba(102,153,204, 1) !important;
}

or

COPY CODE

.header-color .top-menu li > a, .header-color #top-social li a {
  color: #6699cc !important;
}

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