Scroll down arrow over hero slide-show images

Highlighted
New Member
5 0 0

hello,

I'd like to add a simple 'down arrow head' to my hero slide show carousel in the Brooklyn theme. 

My users aren't scrolling and I need to let them see that they can. 

Please can you help me do this. 

Marc

0 Likes
Highlighted
Tourist
4 0 1

Same question here. Anything?

0 Likes
Highlighted
New Member
3 0 0

yes, this would be helpful --- I would like this too

0 Likes
Highlighted
Shopify Expert
2686 67 717

Hi guys,

paste this code to the bottom of the theme.scss.liquid Asset:

/* --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;}
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
2 0 0

how can i move the location of the scroll down arrow up? it is currently right over the slideshow buttons which limits usability and doesnt look nice.

0 Likes
Highlighted
New Member
1 0 0

Hi there,

That isn't working for me at all (yes, using Brooklyn theme) - have edited Assets -> theme.scss.liquid but the markup looks wrong - surely the div should be referenced in a template? Sorry, VERY basic knowledge here! Am I missing something obvious?

Cheers,

Mat

0 Likes
Highlighted
Shopify Expert
2686 67 717

Matt, 

You're right, but it looks like your Brooklyn is a different version from the one assumed in the above code. You should try replacing 

div#shopify-section-slideshow:before {

with 

#Hero:before {

in the code above.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
1 0 0

Hi, this is great and exactly what I need.

The problem I'm having is that it is not exactly centred left / right.

The position is set to left: 48%; and changing this only throws this off centre further and exaggerates it on different devices.

Is there a simple way to centre this up?

 

Thanks

Graham 

0 Likes
Highlighted
New Member
6 0 0

Hi Tim,

This is perfect, thanks a lot. Is there a way to make it clickable so that if people clicks, the page scroll down to the next section ?

Regards,

0 Likes
Highlighted
New Member
2 0 0

Hi, this looks great. But for some reason I applied your code and it looks like the arrow is there but below the image or transparent.

Any clues on what Im doing wrong? 

Thanks

 

Here the result:

 

Screen Shot 2020-03-15 at 9.13.19 PM.png

 

0 Likes