HI @eclectic.ann !
It sounds like you are interested in a html smooth scroll instead of scroll padding.
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
2 Likes
just add this in your css file and after that you will see that when you click an link on the page it will smoothly scroll to that specific section of the page. 
html {
scroll-behavior: smooth;
}
2 Likes
@vedantjangid @jwilkins.oboe THANK YOU FOR YOUR REPLIES. It worked:muscle:t4:
. So happy. However:cold_sweat:…i tried it on my other page. It doesn’t land where it is supposed to. Do you think you can look at what I missed or did incorrectly? Sorry for the bother:worried:The link is below.
scroll padding not working???
what is the thing that you are struggling with ??
is it =>
- the header is not going up with the section scrolling up
2.is the header padding too big
2 Likes
Your nav bar is really large so it is probably doing it’s best to scroll to that section.
Try making it smaller and seeing if that makes a difference.
2 Likes
yes as she suggested @jwilkins.oboe that your nav link and size of the a tags are too big just resize them and one more suggestion from me would be that when you are making a website you should not use such fonts you can always use google fonts for some really good and minimalistic looking fonts which would completely change the look and aesthetic of the page.
1 Like
hehe that one is from google fonts and i didnt choose it. the person im making this for chose that, but i suppose for the purpose of the test suite, ill change it 
. thank you. but i meant that when i click on either of the nav lists, i want them to land exactly at the top of that section. See screenshots below:
i will apply both of your suggestions asap and see if it is better. thanks again, guys!
There are some other techniques for fixing the section links.
Often some top padding and top negative margin are enough. However, you also want to make sure you are using the correct elements for the id that the link is using. For the most part, it should be the section container and not some element inside the section. You likely also have to account for the other padding/margin you might be using. Depending on the page some of the techniques will, or won’t work.
2 Likes
the thing with the code is the id you added was to the p tag which was not at the starting of the section where we want it to be so
first you must enclose the 1st section in a div and add th id there that would fix the problem
1 Like
And also make the nav bar bit small 
1 Like
reading this asap! thanks so much! ill “trial & error” all these things. thank you so much for sharing this article @lasjorg .
1 Like
Yep, this is how I do it. Take a look at the CSS for the <h2>s on my page,
1 Like
Awesome! Thanks @bbsmooth. Specific example:ok_hand:t4:
. Much appreciated!
about your issue with landing in the right place, a simple solution that i found was to put scroll-padding-top: bar_size; in the root of the Css, were bar_size needs to be the same size of your topbar. ex: scroll-padding-top: 50px.
2 Likes
Awesome! Thank you! Trying this, too:nerd_face:
Oh wait…does this work if I dont have a root css, too?
In the html, the root is equivalent to the html selector. So you can use the html selector.
1 Like
. I really would like it when I click on the links on my navbar, it will land where it is supposed to 
