Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #528176

    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.

    • This topic was modified 8 years, 11 months ago by hmsvictory.
    #528183

    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;}
Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Transparent header background at all times on all pages’ is closed to new replies.