I am struggling with the css for my header background. I want the background of my header to be at 80% opacity at all times, even before the user starts to scroll. I want to be able to show full screen backgrounds that go behind the header before scrolling.
I know how to make the header transparent, but it only happens after the user starts scrolling, so the color changes. There must be a background element behind the header that is of a different background? This is what I am using. There seems to be some conflict with the background colors set in the theme options.
#top .av_header_transparency .header_bg, .header_color .header_bg, #top .footer_color, #top .socket_color, #top .header_color .main_menu ul ul {background-color: rgba(110, 108, 108, 0.8) !important;}
I want it to look like this all the time
But that only happens once you start to scroll. I am not using the “transparent header” option on the page layout. Just coding it by css. I should add that I am NOT using the boxed layout.
I guess I answered my own question. The problem was the background color from the .html_stretched
/* Fully transparent */
html, .html_stretched #wrap_all {background-color: #ffffff;}
#top #main, #top .html_stretched #wrap_all, #top .alternate_color, #top .header_color, #top .main_color, #top .header_color div, #top #header, #top .header_color .container_wrap_meta, #top .header_color .header_bg {
background-color:rgba(255,255,255,0) !important;}
/* HEADER */
#top .av_header_transparency .header_bg, #top .header_color .header_bg, #top .footer_color, #top .socket_color, #top .header_color .main_menu ul ul {background-color: rgba(110, 108, 108, 0.8) !important;}