[Resolved] Smooth Scroll Padding

[letsdoit]

Hello Team,

I am using smooth scroll on this page which has header element and using this for css .inside-page-hero .smooth-scroll {bottom: 20px;} and this in header element <a class="smooth-scroll" href="#contact-css-class">Scroll down</a>

But padding has no effect. Could you pls advice where I am wrong. It is still not working.

And can one apply HTML anchor to container/grid too.

Thanks a lot.

[David]

Hi there,

do you want to add some space below the smooth-scroll button ? If so add some bottom padding to the Header Element.

If you want to increase to add space and increase its clickable size then you will do this:

.inside-page-hero a.smooth-scroll {
    display: block;
    padding-bottom:  20px;
}

[letsdoit]

Thanks David, it works.

One more thing, can an anchor link jump to the container (GB Blocks) or it jumps to content/image only.

At present, if you click on scroll now, it jumps a bit further ahead down. Can this jumping distance be controlled.

[David]

You can select a Container Block ( or any GB block element ) > Settings sidebar > Advanced and give it an ID to match your links href without the #.

So href = #contact-css-class
ID = contact-css-class

With a container block it will scroll to the top if it. You can increase the space between that and the content by adding top Padding to the Container.

[letsdoit]

Thanks a lot..

[David]

You’re welcome

[Author]

Posts