Best way to add 20px top-padding to anchor link scrolls?

How To
1

I tried this but it doesn’t work:

html {scroll-padding-top: 20px;}

2

Hi @PaulV and welcome to the forum :partying_face:

You can try adding the following CSS to your website:

[id] {
    scroll-margin-top: 20px;
}

It should add 20px of margin top to all your IDs if you scroll to them. If you want only a few, then you can make the selector more specific.

Best regards,
Matej

3

Thanks, that worked, but when I tried using “h2[id], h3[id] {scroll-margin-top:20px;}“ it didn’t work anymore.

I figured out why. The reason is:

I use a rich text element for headings because I make one word in the headings a different color. When I set an ID in that element (which is set to be a H2), Bricks applies the ID to a div wrapper instead - not the H2.

I solved it by editing the code and adding the ID manually to the H2s.

P.S. Does the rich text element really need a div wrapper?

4

in a heading block you could include spans a.e.

This is a heading block

then set a class .marked{ } with whatever styles you want.

p.s. yes a rich text element needs a div wrapper because it encompasses multiple elements a.e. headings paragraphs ul/ol etc…

5

Ah ok got in thanks for the tip. Didn’t realize I could add spans inside the header input field, since it is such a small field. Did that now as it’s a cleaner solution. Cheers.