[Resolved] Scroll down button for Head On library item

[Elizabeth]

Hello,

How do I add a “scroll down” indicator over the header on my new site, which is using the Head On setup? I believe this is possible with hooks but could use some specific instruction as I don’t want to mess up any of the template’s CSS etc. which I’m not super familiar with.

Thanks!

[Tom]

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 🙂

[Elizabeth]

Thank you!

[Tom]

No problem 🙂

[Elizabeth]

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

[Tom]

Hi there,

Where can I see the current setup?

Let me know 🙂

[Elizabeth]

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…

[David]

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>

[Elizabeth]

Works great, thank you!

[David]

You’re welcome

[Author]

Posts