Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 23, 2021 at 2:39 pm #1283098
    antdesign01

    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?

    February 24, 2021 at 9:12 am #1283318
    antdesign01

    Anybody know how to achieve this?

    February 25, 2021 at 2:57 pm #1283684
    antdesign01

    I guess not…

    February 25, 2021 at 4:59 pm #1283716
    Ismael

    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

    February 25, 2021 at 11:49 pm #1283762
    antdesign01

    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

    February 26, 2021 at 4:07 pm #1283881
    Ismael

    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

    February 27, 2021 at 2:28 am #1284028
    antdesign01

    That did the trick! Thank you.

    February 28, 2021 at 4:03 pm #1284229
    Victoria

    Hi antdesign01,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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