Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 10, 2015 at 12:23 am #377646
    millertimesites

    I got the following code to work for adding transparency to the standard header/menu, but can’t figure out how to make the Glassy header less transparent. .header_color .header_bg{background-color: rgba(255,255,255,0.5);}

    Here is an example of a page where I want the Glassy header to be less transparent but still want the stick menu to remain solid white
    http://de9.417.myftpupload.com/

    I tried this coding and it works great, however, it messes with the container size of the header and content making the site restricted to box layout width for some reason even though it is was full width before adding this code.
    #top .av_header_glassy.av_header_transparency { background-color: rgba(255,255,255,0.5);

    Thanks
    Jon

    January 10, 2015 at 4:29 am #377692
    Andy

    Hi Jon!

    if you want to reduce opacity (transparency) for this:

    .header_color .header_bg{background-color: rgba(255,255,255,0.5);}

    you need to adjust the last value, for example to:

    .header_color .header_bg{background-color: rgba(255,255,255,0.1);}

    For your glassy header use this in Quick CSS and adjust as needed:

    #top .av_header_glassy.av_header_transparency #header_main {
background-color: rgba(255,255,255,0.1);
}

    Regards,
    Andy

    January 10, 2015 at 8:53 pm #377845
    millertimesites

    Andy thanks
    That was the same code I had except I was missing #header_main in the middle.
    It is no longer messing with the width of the of my site, thanks a ton
    Jon

    January 11, 2015 at 1:12 am #377867
    millertimesites

    with the Glassy Header I did notice a slight bug in the code for the Transparent Header Logo.

    Under general settings it lets you have a different version of the logo for a transparent header then the solid or scrolled header.
    The issue is it only overlays the normal logo on scroll and doesn’t remove the alternate version. So if you have a alternate logo with a drop shadow, the drop shadow is still visible when the logo “switches”
    Example: http://de9.417.myftpupload.com/

    How far off am I on the Quick CSS code to fix this issue from what I have below? Can’t get it to work
    #top .header-scrolled .alternate_logo {opacity: 0.0; }

    January 12, 2015 at 7:43 am #378169
    Ismael

    Hey!

    Use this on Quick CSS or custom.css:

    .logo img.alternate {
display: none;
}

.av_header_transparency img.alternate {
display: block !important;
}

    Best regards,
    Ismael

    January 12, 2015 at 9:34 pm #378533
    millertimesites

    perfect, thanks for finding the solution
    Jon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How To Reduce Glassy Header Transparency?’ is closed to new replies.