Scroll down arrow for hero image Debut Theme

Highlighted
New Member
4 0 0

Hello!

I'd like to create an arrow that points down so people know that they can scroll down the page.

I found this code, but it was for the brooklyn theme. I did everything correct, but the arrow appeared at the end of the page, not at the end of the hero section on the top of the page.

Any idea how I could make this work for the debut theme?

 

/* --tim: add an animated down arrow to the bottom of slideshow */
div#shopify-section-slideshow:before {
content: "\21e3";
position: absolute;
display: block;
z-index: 34560;
bottom: 20px;
left: 48%;
font-size: 2em;
border-radius: 1em;
font-weight: bold;

border: 3px solid gray;
padding: 0.1em 0.1em 0;

animation-name: color_change;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes color_change {
0% { color: gray; bottom:20px;}
10% { color: black; bottom:10px;}
20% { color: gray; bottom:20px;}
100%{ color: gray; bottom:20px;}
}

0 Likes
Highlighted
Shopify Partner
968 150 162

Hi There!

Would you mind sharing the URL where we can see the behavior? I'll try assisting as much as possible!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Shopify Partner
2451 533 676

Hey @Bered 

 Can you please provide me your webshop URL?

I will check and provide you solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
4 0 0

Thank you! Bered.nu (password: berednu)

0 Likes
Highlighted
New Member
4 0 0

Thank you! Bered.nu (password: berednu)

0 Likes
Highlighted
New Member
4 0 0

Where you able to have a look on this? URL: Bered.nu, password: berednu

 

Thank you!

0 Likes