Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1283098

    I am wondering if someone can help me achieve a certain result. On this example site, https://www.niceforyou.com/au, when the user scrolls, the sticky menu background slides down from above instead of fading in – I really like that subtle approach.

    Is there a way to achieve the same with Enfold?

    #1283318

    Anybody know how to achieve this?

    #1283684

    I guess not…

    #1283716

    Hi,

    Thank you for the inquiry.

    That is a nice header effect. We will not be able to replicate it exactly, but this css code should get you started.

    .header_color .header_bg {
    	background-color: transparent;
    }
    
    #header_main {
        border: 0;
    }
    
    .av_header_transparency #header_main::before {
        top: -99px;
        transition: all 0.3s ease-in-out;
    }
    
    #header_main::before {
        content: "";
        width: 100%;
        height: 90px;
        display: block;
        background: #ffffff;
        position: absolute;
        z-index: 0;
        top: 0;
    }

    Make sure that the page has a transparent header and that it is sticky.

    Best regards,
    Ismael

    #1283762

    Hi Ismael,

    Thanks for coming back to me, I have added that code and if you have a look at the link provided in private you will see the block now turns transparent on scroll. When I changed that portion of the code to #ffffff, I can see that it turns the fade effect back on, so I assume that it is the section of code “.av_header_transparency” that is meant to control the block. How would I make that drop in white, instead of transparent?

    Thanks Ismael, really appreciate your looking at this for me… it’s a funky little effect if we can get close to matching it.

    Ant

    #1283881

    Hi,

    Thank you for the update.

    It is not yet working because the quotation marks in this part of the code have been converted to something else, and so the container block that is supposed to transition up and down is not rendered.

    content: "
    

    Please replace it with this.

    content: "";
    

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.