How To Change Header Background Color In Css

Viewing 24 posts - 1 through 24 (of 24 total)

Posts
November 3, 2015 at 12:19 pm #529124

Hello,

is there a quick way to change the header color for a specific side ?

I would like to change the color of the header and the phone number for my start page.

http://fresh.kobalt.de

Interesting side note. The video slide show stops looping after a while in Safari but works fine in Chrome.

Fabian

November 3, 2015 at 12:52 pm #529164
Hi quantum!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
                .home #header.av_header_transparency * {     color: orange; }              
```
Regards,
Yigit
November 3, 2015 at 4:09 pm #529387
Hi Ygit,

thanks works great.

Last question, is it possible to change the color for the submenu text and make the submenu transparent too ?

http://fresh.kobalt.de

I tried to find the code in the enfold.css, but no luck.

A help in any direction would be great.

Fabian
- This reply was modified 6 years, 1 month ago by quantum.
November 4, 2015 at 3:30 am #529707

Hey!

You can modify the submenu style on Enfold > Advanced Styling panel. Edit the Main menu sublevel links element. Note that you can add two instances of this element, for the initial and the hover state.

Best regards,
Ismael

November 4, 2015 at 12:02 pm #529923

Hey Ismael,

thanks for your help. i know, but is it possible to change the color for the submenu text and submenu color (transparent) only for one site with the help of Quick CSS ?

In this case it would be my landing page. In this case the main menu is transparent but the submenu is not at he landing page.

http://fresh.kobalt.de

fabian

November 5, 2015 at 5:46 am #530518
Hi!

Thank you for the info. Add this in the Quick CSS field:
```
                .home #wrap_all .av-main-nav ul.sub-menu li a, .home #wrap_all .av-main-nav ul.sub-menu {     background: transparent;     border: 0;     box-shadow: none; }  .home #wrap_all .av-main-nav ul.sub-menu li a .avia-menu-text {     color: red; }              
```
Best regards,
Ismael
July 24, 2019 at 3:02 pm #1121566

Hi!

I want to change color of top bar. I succeed, but now I want the change that color in a few pages. This is the code I used for all the pages:

#top #header_meta {
background-color: rgba(0, 141, 156, 0.7) !important;
}

So that code is working. What code can I use for a specific page? These are not working:

.page-id-121 #top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

.page-id-121 #top .av_header_transparency #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

.post-id-121 #top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

After I added codes to custom CSS I cleared my cache. And tried both codes first in custom css. Both not working.

Love to hear from you!

Janneke

July 24, 2019 at 3:04 pm #1121567

If you need login info. See private content. Site is on maintenance mode :)

July 25, 2019 at 1:49 am #1121790
Hi,

@jannnnnneke: You have to remove the space between the page id and the #top selector.
```
                .page-id-121#top                              
```
Or just remove the #top selector. Let us know if it helps.

Best regards,
Ismael
July 25, 2019 at 8:51 am #1121837

Yes I removed the space and that worked!! Thanks!!

When I want to add more page-id's, is that possible in the same line? Something like:

.page-id-120 .page-id-121 .page-id-122 .page-id-123#top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

Or should I add this 4 times to custom CSS with another page ID?

July 25, 2019 at 2:12 pm #1121904
Hi jannnnnneke,

Different selectors have to be separated by a comma, like this:
```
                .page-id-121 #top, .page-id-122 #top, .page-id-123 #top {   arguments here }              
```
Best regards,
Rikard
August 12, 2019 at 10:09 am #1126745
Hi! How does it work with portfolio items? This is all not working:

.page-id-123#top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

.post-id-123#top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

.post-123#top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

.post-123 #top #header_meta {
background-color: rgba(0, 158, 83, 0.7) !important;
}

Thanks!
- This reply was modified 2 years, 3 months ago by jannnnnneke.
August 16, 2019 at 8:20 am #1128163

Hi,

You may not see the changes until the cached files are cleared in your browser.

Please perform the below steps to clear the browser cache:

1. Disable "merging and compression" for CSS and JS files from Enfold > Performance.
2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right-click on the refresh button and select "Empty Cache and Hard Reload".

Best regards,
Vinay

August 20, 2019 at 2:53 pm #1129229

Hi there, sorry but it's not working. On the portfolio page you need to see the same color green color in top bar as the other page. See private content.

What do you think is the right code?

August 22, 2019 at 1:44 am #1129811
Hi,

Thank you for the update.

The selector or class is a bit different for portfolio items.
```
                .responsive .single-portfolio.postid-338 #header_meta {       background-color: rgba(0, 158, 83, 0.7) !important; }              
```
Take note of the ".postid-338" selector.

Best regards,
Ismael
August 22, 2019 at 3:13 pm #1129994

Perfect, thank you!! I see I didn't try .postid-338, and that worked!

August 22, 2019 at 5:51 pm #1130051

Sorry, is it possible to change the color of the top bar when you scroll down? I made the top bar sticky!

Thanks a lot!

August 23, 2019 at 5:27 am #1130187

Hi jannnnnneke,

On which page you want to apply that to?

Best regards,
Rikard

August 23, 2019 at 9:35 am #1130256

On all pages when scrolling down!

August 26, 2019 at 1:59 am #1130797

Hi,

Thank you for the update.

You can change the default color of the top bar or header meta on pages with transparent header by prepending the "av_header_transparency" selector to the #header_meta selector. To change the color on scroll, just remove the av_header_transparency and apply a different color.

Best regards,
Ismael

August 29, 2019 at 5:05 pm #1131998
Thanks!!

Only problem is that the top bar when header is transparant and not scrolled and not got a specific css code, the top bar is grey but I only want it grey when scrolled.

See private data for link where the header is transparant but I didn't add a specific color for the top bar. When you're not scrolling the top bar is #eeeeee. It must be #eeeeee everywhere, rgba(0, 141, 156, 0.5) when header is transparant and on a few pages the top bar is another color which I got specific page ID css codes for.

This is my css code now:
```
                .page-id-2#top .av_header_transparency #header_meta, .page-id-305#top .av_header_transparency #header_meta { background-color: rgba(0, 141, 156, 0.5) !important; }  .page-id-121#top .av_header_transparency #header_meta, .page-id-249#top .av_header_transparency #header_meta, .page-id-332#top .av_header_transparency #header_meta, .page-id-563#top .av_header_transparency #header_meta, .page-id-571#top .av_header_transparency #header_meta, .page-id-582#top .av_header_transparency #header_meta, .page-id-574#top .av_header_transparency #header_meta { background-color: rgba(0, 158, 83, 0.5) !important; }  .postid-338#top .av_header_transparency #header_meta, .postid-538#top .av_header_transparency #header_meta, .postid-541#top .av_header_transparency #header_meta, .postid-544#top .av_header_transparency #header_meta, .postid-547#top .av_header_transparency #header_meta, .postid-550#top .av_header_transparency #header_meta, .postid-553#top .av_header_transparency #header_meta, .postid-556#top .av_header_transparency #header_meta, .postid-559#top .av_header_transparency #header_meta { background-color: rgba(0, 158, 83, 0.5) !important; }  .page-id-308#top .av_header_transparency #header_meta { background-color: rgba(97, 72, 127, 0.5) !important; }  .postid-414#top .av_header_transparency #header_meta, .postid-425#top .av_header_transparency #header_meta, .postid-431#top .av_header_transparency #header_meta, .postid-434#top .av_header_transparency #header_meta { background-color: rgba(97, 72, 127, 0.5) !important; }  #header_meta { background-color: #eeeeee !important; }              
```
Itsn't there a css code for sticky header, just like there is a code for transparency header?

Hope you can help me!

Thanks a lot!
September 2, 2019 at 3:58 am #1132777
Hi,

Thank you for the update.

The following css code should change the default background color of the header meta.
```
                #header_meta {     background-color: #eeeeee !important; }              
```
When the header is transparent or when the site isn't scrolled, just append the ".av_header_transparency" selector.
```
                .av_header_transparency #header_meta {     background-color: #eeeeee !important; }              
```
An additional class attribute will be added to the header when the site is scrolled, but it's only available when you set the header to shrink on scroll.

Best regards,
Ismael
September 9, 2019 at 10:03 am #1135870

Oh now I see!! That's working, thanks a lot!!

September 9, 2019 at 2:36 pm #1136032

Hi jannnnnneke,

Glad you got it working for you! :)

If you need further assistance please let us know.

Best regards,
Victoria
Author

Posts