Scroll down arrow

Hi,

Great, glad you found the problem and thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,
OK, I see you have an advanced setup on your homepage, with 3 sliders for the top that show at different screen sizes, and then a color section that is always hidden, which was the target of the “next section” arrows.
I moved the hidden color section below the next visible color section to show the arrow will now work, but please consider removing the hidden color section. Please see screenshot in Private Content area.

The slider for the desktop will work because it is on bottom of all the sliders, the tablet & mobile sliders arrow will still not work because they are pointing the hidden desktop slider. I believe the real solution for this is to remove all of the arrows of all of the sliders, and create a “code block” with the ID “next-section-arrow” arrow with this code:

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

then add this ID to the target section below all of the sliders:

true-next

Then add this css to move the arrow up over the sliders:

/* code block arrow */
#top.home .avia-fullscreen-slider{
z-index: 1;
}
#top.home #top .scroll-down-link {
top: -130px;
}
#top.home #after_full_slider_3 .content {padding: 0px !important;}

This is an example for the homepage, and I have added this to your site so you can see how it works.

So if you wish to use this for other pages, you can follow these steps, Or now that you know how the hidden elements are affecting the arrow link you can consider a different approach, such as one slider of all screen sizes, or only using the arrow for desktop devices.

Best regards,
Mike