Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • June 9, 2020 at 2:59 pm #1220881
    hotspot

    Hello,
    We need a scroll down button on the full width easy slider. In this slider there is strangely no option for it to set the scroll down button?
    How can we achieve this?

    We cannot use a content section, since a slider cannot be added to that.
    Also we cannot use the Full screen slider (this slides does have the option for a scroll down button), since the image width of the item in the slider needs to be visible at all times.

    please advise
    regards J

    June 15, 2020 at 4:24 am #1222542
    Mike

    Hey hotspot,
    Sorry for the late reply, to add a “scroll down arrow” to the top of your page over a full width easy slider, first create a “code block” with the ID “next-section-arrow” under the full width easy slider with this code:

    <style>
#top #next-section-arrow .scroll-down-link {
    top: -20vh;
    left: 42.5vw !important;
}
</style>

<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 the slider: true-next
    Then clear your browser cache and check.

    Best regards,
    Mike

    October 23, 2020 at 11:40 pm #1255349
    webenv9384

    How would I go about changing the color of the icon for this? Our background is white and the arrow all but gets lost because it is only white with a shadow.

    October 24, 2020 at 12:32 pm #1255414
    Mike

    Hi,
    Please try adding “color” to the css like this:

    #top #next-section-arrow .scroll-down-link {
    top: -20vh;
    left: 42.5vw !important;
    color: red !important;
}

    PLease adjust to suit and then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    October 26, 2020 at 11:07 pm #1255895
    webenv9384

    Thanks for the response on an old topic. Adding this string doesn’t seem to work. Could the icon be overriding the color choice? this is what I have…

    <style>
#top #next-section-arrow .scroll-down-link {
    top: -20vh;
    left: 42.5vw !important;
    color: gray !important;
}
</style>

<a href="#true-next" title="" class="scroll-down-link av-control-hidden" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a>
    • This reply was modified 4 years ago by webenv9384.
    October 27, 2020 at 2:09 pm #1256060
    Mike

    Hi,
    I tested your code above on my localhost and it works correctly, the icon is gray, please link to your page so we can examine.

    Best regards,
    Mike

    October 27, 2020 at 4:27 pm #1256138
    webenv9384

    Hello,

    here is the site: http://littlebirdmarketing.com

    the arrow is located below the main text and image on each section of the homepage. Only the first arrow on the page has the new color code.

    Thanks

    October 29, 2020 at 7:10 am #1256604
    webenv9384

    Hey Mike, any ideas here?

    October 29, 2020 at 12:20 pm #1256686
    Mike

    Hi,
    It looks like you forgot to add the ID “next-section-arrow” to the code block section, please check.

    Best regards,
    Mike

    October 29, 2020 at 6:37 pm #1256853
    webenv9384

    Mike, thanks for your help. I have added that bit of code but I am still only getting a white arrow. This is my code.

    `<style>
    #top #next-section-arrow .scroll-down-link {
    top: -20vh;
    left: 42.5vw !important;
    color: grey !important;
    }
    </style>

    October 30, 2020 at 12:38 pm #1257032
    Mike

    Hi,
    Please review this post above, the first step is to add a code block element “with the ID “next-section-arrow” ” in the developer settings like this:
    2020-10-30_062653.jpg
    I see that you are using the code block arrow 3 times on the page but none of them include the custom ID, this adds the ID to the element so the css will work. If you include an admin login we could help further with this.

    Best regards,
    Mike

    October 30, 2020 at 4:21 pm #1257069
    webenv9384

    Mike,

    I added this ID to the section you specified and it breaks the arrow completely. I have added login credentials to the private section. Please let me know what the heck I’m doing wrong :)

    Thanks for your help.

    • This reply was modified 4 years ago by webenv9384.
    October 31, 2020 at 6:26 pm #1257279
    Mike

    Hi,
    Thank you for the login, I took a look at your page, and since you are using three of these code blocks each needs to be a little different, for example, the first code block has the ID of next-section-arrow-one and the link to the next color section, and the color section’s ID needs to be next-section-two like this:

    <style>
#top #next-section-arrow-one .scroll-down-link {
    left: 27.5vw !important;
    color: black !important;
}
</style>

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

    then the next one is like this:

    <style>
#top #next-section-arrow-two .scroll-down-link {
    left: 27.5vw !important;
    color: black !important;
}
</style>

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

    Since you are using a 50px white space above the code block I removed the “top” setting and adjusted the “left” setting in the css because you are using a sidebar on the page and you will want the arrow to be centered.
    I made these changes for you, please clear your browser cache and check.

    Best regards,
    Mike

    November 2, 2020 at 8:08 pm #1257684
    webenv9384

    Thanks, Mike. This is what we needed. Appreciate your time and help.

    November 3, 2020 at 1:14 am #1257810
    Jordan Shannon

    Hey webenv9384,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    June 3, 2021 at 3:06 pm #1303778
    wzshop

    Hi @Mike,
    Thank you for your answer.
    I needed to adjust the css to 

    #top #next-section-arrow .scroll-down-link {
top: -9vh;
left: 36vw !important;
}

    To get it centered and in the easy slider above, but when I change the viewport/browser screen size it does not seem to work. The arrow is not in the center anymore and also the top positioning goes wrong.

    Any idea if there is a solid CSS solution for this?

    The easy slider min height is 550px; and the min width of the content is 1310px, Ratio content and sidebar is 73% | 27% and the width of content and sidebar is 90%.

    Thanks

    June 5, 2021 at 3:34 pm #1304212
    Mike

    Hi,
    Thank you for your interest in this old thread, I checked again with Enfold v4.8.3 and there is a margin-left: -40px please try changing to zero like this:

    #top #next-section-arrow .scroll-down-link {
top: -9vh;
left: 36vw !important;
margin-left: 0px !important; 
}

    this seems to correct on my test site, if you don’t get the same results please link to your site.

    Best regards,
    Mike

    June 7, 2021 at 10:00 am #1304371
    wzshop

    Hi Mike, thanks a lot, that works!

    June 8, 2021 at 8:25 am #1304553
    Rikard

    Hi wzshop,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.