Transparent & Glassy Header Colors

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top .av_header_transparency #header_meta {
background: rgba(0, 0, 0, 0.7) !important;
}
.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
background-color: rgba(0, 0, 0, 0.7) !important;
}
.header_color .sub_menu>ul>li>a, .header_color .sub_menu>div>ul>li>a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
    color: #fff !important;
}
#top .av_header_glassy.av_header_transparency #header_main {
    border-color: rgba(255,255,255,0.7) !important; 

Best regards,
Mike

Hi,
Thank you for the screenshot, the css above only changes the colors and not height, perhaps it’s a color illusion?
I tried testing with and without the css but I don’t see a change in height, unless I’m looking at the wrong area.
I made a video of my test to show what I mean. Please see video link in the Private Content area.

To make the header background a darker white please try changing the “0.7” to a higher number.

.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

But I found the header to see when scrolling over a white area of your site, perhaps try testing a lighter black will help?

.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

To make the phone text white, please try this css:

.phone-info {color: #fff !important;}

To hide the top bar borders, please try:

#top .social_bookmarks li,#top .av_header_transparency #header_meta {
    border-right-style: none !important; 
    border-bottom: none !important;
}

Best regards,
Mike

Hi,
Oh I see, you mean from side to side, the width. I was looking at the height, I bet you have a missing bracket in your css.
Please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike

Hi,
Thanks for the login, I did find that your css was missing a bracket, which I fixed.
It is now working correctly, Please clear your browser cache and check.

Best regards,
Mike

Hi,
When you say a darker header, do you mean a less transparent white, or a transparent black?
For the header before scroll, this css is a black:

#header {
    background: rgba(0, 0, 0, 0.5) !important; 
}

this one is a white:

#header {
    background: rgba(255, 255, 255, 0.5) !important; 
}

For after scroll I see it is set to a white 0.9, and that is what I seeing, perhaps try clearing your cache. Or let us know if you want it to be a transparent black.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike