Custom Scroll Bottom Anchor

Support
#1

Hi there,

I’m trying to use a custom “Scroll Bottom Anchor”-Element on my site (the little arrow-button when you’ve got a slider above your masthead like in the Integrity-1 Demo).

I just don’t want to use a heavy slider for one headline and one embedded video, so I tried to use the following code inside a Raw-Content element.

<a href="#workbook" class="x-slider-scroll-bottom above bottom center">
  <i class="x-icon-angle-down" data-x-icon="&#xf107" aria-hidden="true"></i>
</a>

So with all the above classes, it should be perfectly aligned at the bottom center of the site. But to get it working I needed to give the column container a fixed position and the bottom styling. The result can be seen on the site: http://www.reha-selbsthilfe.de/

So the problem is that I can’t get it to work with an absolute position so it won’t stuck in the background somewhere. I tried to give the row container an absolute position and the bottom styling but this didn’t work either. When I use the browser dev-tools and insert the code just inside the section container it works just perfect but unfortunately cornerstone doesn’t allow me to do that :wink:

Would be great if you could help me out with that one.

Regards
Uli

Scroll Bottom Anchor with Label
#2

Hello There,

Thanks for the very detailed post information. To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#workbook-header .x-container:not(.max) {
    position: absolute;
    width: 100%;
    bottom: 0;
}

#workbook-header .x-container:not(.max) .x-column {
    position: relative !important;
}

Hope this helps. Please let us know how it goes.

1 Like
#3

Hi RueNel,

works like a charm! Thank you!

Regards
Uli

#4

You’re most welcome!