Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 15, 2016 at 6:50 pm #712554
    mattb1169

    Hello.
    I’m building a new site and we like the transparent header. However, the logo we’d like to use with the company colors is getting lost. I’d like to have a dark overlay in the header so the logo pops. Is there a way to change that feature? Using a white logo is not an option. I have placed a screen on the actual photo of the first image in the slider, but obviously that’s not responsive so doesn’t adjust when screen size changes.

    November 16, 2016 at 7:40 am #712788
    Nikko

    Hi mattb1169!

    Try adding this code in Quick CSS (located in Enfold > General Styling) for header dark overlay:

    #top #wrap_all .header_color.av_header_transparency {
    background: rgba(0,0,0,0.8) !important;
}

#top .header_bg {
    background: transparent !important;
}

    As for this part of your statement

    I have placed a screen on the actual photo of the first image in the slider, but obviously that’s not responsive so doesn’t adjust when screen size changes.

    Can you elaborate more on the details.

    Cheers!
    Nikko

    November 16, 2016 at 5:17 pm #713051
    mattb1169

    Thanks Nikko,
    I will try the Quick CSS code. What I meant about the “screen on the actual photo” was that I added the transparent screen to the image in Photoshop before uploading to the media library. So it had the desired effect but it is not responsive.

    Matt

    November 16, 2016 at 5:30 pm #713074
    mattb1169

    Nikko,
    I just added the script to the Quick CSS. It did create the dark transparent overlay, thank you. However, the header no longer changes when scrolling down to the solid white background color (the tool bar does turn red, which is correct). When I now scroll the dark transparent overlay turns to the light transparent overlay.

    I believe the settings are still correct to go from transparent & glassy header to the white background in the header w/ red tool bar. Did the Quick CSS code overwrite something?

    Thanks,
    Matt

    November 17, 2016 at 7:30 am #713404
    Nikko

    Hey!

    Yes, the code in Quick CSS overwrites some css code and that’s what you are seeing, if you want the white background to show on scroll, please remove this code that I gave:

    #top .header_bg {
    background: transparent !important;
}

    If there’s any changes you need after doing this please let us know.

    Best regards,
    Nikko

    November 18, 2016 at 2:24 am #713780
    mattb1169

    Thanks Nikko,
    That worked great!

    Matt

    November 18, 2016 at 4:23 am #713804
    Nikko

    Hi!

    Glad we could help :)

    Cheers!
    Nikko

    May 11, 2021 at 7:23 pm #1299751
    ppi37

    Hi Nikko,
    Your CSS code works perfecktly, but it puts an overlay in the mobile menu also.
    How to don’t change the mobile menu ?
    Thanks

    May 12, 2021 at 3:38 am #1299769
    Nikko

    Hi ppi37,

    Can you try to wrap it inside a media query, it should look like this one:

    @media only screen and (min-width:768px) {
  #top #wrap_all .header_color.av_header_transparency {
    background: rgba(0,0,0,0.8) !important;
  }
}

    Best regards,
    Nikko

    May 12, 2021 at 4:29 pm #1299960
    ppi37

    Hi Nikko,
    Perfect !
    Thanks a lot

    May 14, 2021 at 4:17 am #1300223
    Rikard

    Hi ppi37,

    Great, I’m glad that Nikko could help you out :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.