Scroll down arrow at bottom of slider (bis)

Hi:

I scanned Sydney forum to learn how to add a down arrow at the bottom center of my slider.
I found no solution.

But from a different forum (different theme), one guy gave the following advice:

  1. Step One: add this code as a new layer with html, it will add the arrow symbol on top of slider:

<a href="#next-section" title="" class="scroll-down-link" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a>

  1. Step two: add this in your custom CSS to position your arrow:

.avia-layerslider {
z-index: 1;
}
#top .scroll-down-link {
top: -130px;
left: 99% !important;
}

Do you think these two snippets can be adjusted for the Sydney theme? If yes, then how please?

Thanks a lot for your input!

BR

Hello there,

Thank you for getting in touch.

I thought it might be able to replicate. Could you please try to do the following?

  1. Create a new Page Builder row at the top of your page and give a specific CSS class name. e.g. down-scroller-row. The class name field can be accessed from Row Styles > Theme

  1. Add a text widget to this row. Then in the content box, put the following HTML code

<a href="#next-section">Scroll</a>

  1. Adjust the position of the down arrow button by adding the following CSS code through the Simple Custom CSS plugin or child theme’s style.css file
.down-scroller-row{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: -40px; 
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Thanks a lot Kharis!

First, I used an HTML symbol instead of “scroll” (∇ = &#8711),
Then I replaced it with FontAwesome (code: &#xf103).
So inside a VISUAL EDITOR, I put:

[animate style="fadeInDown" data-wow-duration="2" infinitely="yes"]

<a style="color: white; font-size: 400%;" href="#next-section">&#xf103</a>

[/animate]

I used an animate plugin to make my symbol move, and added some shadows for more visibility in Custom CSS:

.down-scroller-rowV{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: center;
  position: relative;
  z-index: 2;
  /* margin-top: -100px; */
margin-top: -10%;
text-shadow: 2px 2px 5px #800000;
font-family:FontAwesome;
}

On my desktop and on my iphone 6+, result is satisfying, I worried about the position of my arrow in different resolutions, so I’ve put “margin-top: -10%;”.
I sincerely don’t know if it will be enough to prevent my arrow to overlap over my Call-To-Action button.
If any better idea, please share!

To check the result on my webby: http://ho-creative.com

Thanks again Kharis!

PS: add a “;” after the charachter code

Hello there,

It looks nice!

In the smaller viewport, try to add more bottom space to the Call-To-Action button.

@media only screen and (max-width:767px){
  .text-slider-section{
     bottom: 15%;
  }
}

Then try to add more negative margin top to the down arrow button.

@media only screen and (max-width:767px){
  .down-scroller-rowV{
    margin-top: -23%;
  }
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

I am trying to do add a downarrow to the slider in Sydney as well. How do you add a custom text widget to the slider? My home page starts with the “Our Services” widget. Adding another row to this page puts the down arrow in the wrong spot.

My site is: http://vingageconsulting.com

hello there,

i’m lost with the above step…can someone help me how to do this step by step and how can i put arrow left and right also at the main slide…pls help me…

thanks.
thebiskut.

Hello there,

To enable next/prev arrows navigation at the main slide, it requires different code. I’ve provided the complete instructions here.

Regards,
Kharis

Hi Kharis,

i already done the navigation button as u guide before, but how can i make the down arrow button shows at the main slide? like this image below,

down arrow button

because i try to make like the image as attached, but when i click the image it will link to the bottom layer (#primary)like i want to… but then it have error like this image how can i fix this?

error box

hope u can teach me how to fix this.

regards,
thebiskut

Hello there,

Please share the link to your site here, so I can have take a closer look.

Regards,
Kharis

Hello Kharis,

this is my link
my website

regards,
thebiskut

Hello @thebiskut,

Please put off all of the code additions you did since you followed incorrect direction which was different purpose. You should follow this tutorial instead.

Regards,
Kharis

hi Kharis,

sorry for the delay, i just update my website following ur tutorial, but still look like the same error that happened to me…i change the downarrow button just like the tutorial and it look like this

and after i click the button it show like this also, same thing happened like before…

what shud i do next? the arrow button can i move it on the right side?i’ll try before by adding the float: right; but its not working either…

>> before i change the the down arrow button, i just do the navigation on my main slider…updating the js/main.js and min.main.js --> but this two files only for the navigation on the slider right?so, it got nothing to do with the down arrow button right?

thanks
thebiskut

Hello there,

Lets address them on by one. I am a bit missing something, I am sorry. From what you’ve written in here, the new extra down arrow button should be placed in the middle of the main slider. Is that correct? Please advice.

Regards,
Kharis

Hi @Kharis,

Yes correct, the down arrow button at the middle of the main slider, but i want it to be place on the right main slider just like this

because the user could not see the down arrow button when it’s below the navigation number of main slider.

my 2nd problem is, when i put the down arrow button code from what u have told me here
this hidden box appear after i click the down arrow button from the main slider

i hope u will understand and help me to fix this issues.

thank you.
thebiskut

To style down arrow button and move its position to the bottom right side, try adding this extra CSS code to Appearance > Customize > Additional.


.scroll-down-arrow {
  width: 40px;
  height: 40px;
  line-height: 40px;
  bottom: 10px;
  right: 70px;
  left: auto;
  background-color: #47c5c1;
  border: 1px solid #47c5c1;
}

.scroll-down-arrow .fa {
  color: #fff;  
}  

.scroll-down-arrow:hover {
  background-color: transparent;  
}  
  
.scroll-down-arrow:hover .fa {
  color: #47c5c1;
}  

Let me know how it goes.

Regards,
Kharis