Archived topic

Smooth Scroll Padding

5 replies · Started by letsdoit on August 14, 2020

Viewing posts 1–6 of 6

August 14, 2020 at 12:52 am #1402139

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.

August 14, 2020 at 4:55 am #1402415

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;
}

August 14, 2020 at 5:18 am #1402447

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.

August 14, 2020 at 5:57 am #1402492

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.

August 14, 2020 at 6:01 am #1402496

Thanks a lot..

August 14, 2020 at 6:06 am #1402504

You're welcome

This archived topic is closed to new replies.

Start building better websites today.