Scroll down button for Head On library item

Hi there,

Since you're using a Header Element, you can add the indicator into the Header Element content.

For example:

<a class="smooth-scroll" href="#your-destination">Scroll down</a>

your-destination would need to be replaced with the ID of the section you want to scroll to.

You would also need to enable smooth scroll in Customize > General.

The "Scroll down" text can be replaced with an image (or an SVG).

Let me know if you need more info :)

Thank you!

No problem :)

Sorry, how do I get it to float above the slideshow in that header element, rather than sit below the slideshow?

Hi there,

Where can I see the current setup?

Let me know :)

https://enunziato.com/LakesPipe1B/

For simplicity I've left the "see more" though I'll be replacing it with an arrow image after I figure this out.

I've also added the smooth-scroll class on the https://enunziato.com/LakesPipe1B/products-services/ page but they're still jumping up and down, not scrolling. I have the smooth scroll option turned on in Customizer hmmm...

Hi there,

for your hero link - edit the anchor link to include this class hero-jump-link:

<a class="smooth-scroll hero-jump-link" href="#home-body">See More</a>

Then add this CSS:

.page-hero {
    position: relative;
}
.hero-jump-link {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

smooth-scroll works by jumping to an element ID.
So instead of this for example:

<a name="specialty-items"></a>

you would edit the Section and in the Section ID add: specialty-items

OR you could do something like this:

<h2 ID="specialty-items">Accessories</h2>

Works great, thank you!

You're welcome