[Resolved] Smooth Scroll Padding

Home Forums Support Smooth Scroll Padding

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1402139
    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.

    #1402415
    David
    Staff
    Customer Support

    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;
    }
    #1402447
    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.

    #1402492
    David
    Staff
    Customer Support

    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.

    #1402496
    letsdoit

    Thanks a lot..

    #1402504
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.