Scroll down arrow for hero image Debut Theme

Bered
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
JHKCreate
Shopify Partner
2565 433 626

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
- Learn more about us: jhkcreate.com

0 Likes
dmwwebartisan
Shopify Partner
7368 1746 2332

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 | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Bered
New Member
4 0 0

Thank you! Bered.nu (password: berednu)

0 Likes
Bered
New Member
4 0 0

Thank you! Bered.nu (password: berednu)

0 Likes
Bered
New Member
4 0 0

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

 

Thank you!

0 Likes
WOLFBKS
Tourist
12 0 0

Hi, 

I was just playing with this myself. To get it on your slider change "div#shopify-section-slideshow:before {" to ".hero:before {". Works for me after that. 

0 Likes
Austin24
New Member
1 0 0

Hi there,

I don't have that much knowledge when it comes to this, where exactly in the code of the Debut theme would you insert (for the down arrow):

/* --tim: add an animated down arrow to the bottom of slideshow */
.hero: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