Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 22, 2020 at 8:14 pm #1195293
    force-media

    Hi Team,

    I am struggling with a CSS Code the half day already. I want to have a header transparency on scroll for desktop version of the site.

    I have a CSS in place like this:

    @media only screen and (max-width: 767px) { 
#header.header_color.av_header_transparency #header_main {
    background-color: #ffffff !important;
}}
@media only screen and (min-width: 768px) { 
#header.header_color.av_header_transparency #header_main {
    background-color: transparent !important; 
}}

@media only screen and (min-width: 768px) { 
#header.header_color.av_header_transparency #header_main .header-scrolled {
    background-color: rgba(255,255,255,.85) !important;
}}

    But for some reason it does not work. Transparency on site level has been enabled.

    Thanks for your support!

    March 24, 2020 at 3:54 pm #1196551
    Victoria

    Hey Frank,

    What do you mean on scroll? When the page scrolls the header becomes transparent? If so the menu and the logo will be lost amongst content.

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    March 27, 2020 at 1:07 pm #1198321
    force-media

    Hi Victoria,

    Thanks a lot for your reply on this. Please have a look at this site. Enfold has also been used for this page. I would like to have the same header behaviour for the website mentioned in my previous post.

    As you can see the header / menu is transparent at the beginning, but when you scroll down background changes to white with slight transparency. Hope this makes it more clearer.

    Best regards,
    Frank

    March 27, 2020 at 3:51 pm #1198363
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
.header_color .header_bg {
    background-color: transparent;
}

    Best regards,
    Yigit

    March 30, 2020 at 10:22 am #1199029
    force-media

    Hi Yigit,

    Thanks a lot. That was the trick.

    Please feel free to close this topic.

    Best regards,
    Frank

    March 30, 2020 at 10:36 am #1199034
    Yigit

    Hi Frank,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Header: Transparent Background-Color on Scroll’ is closed to new replies.