Add a Scrolling Indicator Top Banner Debut Theme

Solved
Highlighted
Tourist
5 1 0

Hi,

I would like to add a scrolling indicator on my top banner where the button is used to be.

I kinda like this scrolling indicator : https://codepen.io/chris_cook/pen/KaMXzE.

I'm on the Debut Theme.

0 Likes
Highlighted
Shopify Expert
3693 550 893

Hi,

Follow this:

1. Go to Online Store->Theme->Edit code

2. Section->slideshow.liquid->paste bellow code in slideshow-wrapper div at end before </div>

 

<div class="mouse_container">
    <div class="mouse">
          <span></span>
    </div>
</div>

3. Add this css before {% schema %} on this page:

 

 

<style>
 .mouse_container{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;bottom:20%;}
.mouse{display:block;width:28px;height:48px;border-radius:11px 11px 15px 15px;border:1px solid #fff;position:absolute;left:50%;margin-left:-13px;z-index:9999;}
.mouse span{display:block;margin:6px auto;width:2px;height:5px;border-radius:4px;background:#fff;border:1px solid transparent;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:scroll;animation-name:scroll;}
@keyframes scroll{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
 100%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
}
</style>

Let me know if you need help

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
5 1 0

I'm going to try, Thanks for your answer.

 

EDIT : It is not working, maybe because I use a section called image with text overlay instead of a slideshow.

EDIT 2 : I guess the section is called hero

0 Likes
Highlighted
Tourist
5 1 0

I'm going to try

EDIT : I successfully put it where I wanted. But now I have a problem with responsiveness

0 Likes
Highlighted
Tourist
5 1 0

This is an accepted solution.

I moved the <style> tag content to Style.scss and added the code with a media-query like so.

I didn't move the HTML mouse container div.

.mouse_container {
  @include media-query($large-up) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 5.5%;
  }
}

.mouse {
  @include media-query($large-up) {
  display: block;
  width: 28px;
  height: 48px;
  border-radius: 11px 11px 15px 15px;
  border: 1px solid #fff;
  position: absolute;
  left: 50%;
  margin-left: -13px;
  z-index: 9999;
  }
}

.mouse span {
  @include media-query($large-up) {
  display: block;
  margin: 6px auto;
  width: 3.5px;
  height: 5px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid transparent;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
  }
}

@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

Hope this helps

0 Likes
Highlighted
Shopify Expert
3693 550 893

So, its working fine or not?

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
5 1 0

yes

0 Likes
Highlighted
Excursionist
13 1 1

 Hi there - thank you so much for providing this code!

I was wondering, if there's any way to hide it on mobile devices?? And is there a way to add a link to the next section?

 

URL https://renovation-warehouse.myshopify.com/

pass renoware

Thanks!

0 Likes
Highlighted
Shopify Expert
3693 550 893

I cant see mouse indicator on slider. can you how me by screenshot so i can help you. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes