Personal Portfolio scroll padding?

Hi everybody!

I just finished my personal portfolio, but I can鈥檛 seem to make the scroll padding work :sob::sob: or I really just don鈥檛 get how it is supposed to work :-/ :flushed::tired_face:. I really would like it when I click on the links on my navbar, it will land where it is supposed to :cold_sweat::cold_sweat::cold_sweat:. I commented that declaration out because it wasn鈥檛 working anyway. Can you help me figure it out, please鈥:pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4::pray:t4:? My repl is below. Will be really much much appreciated. Thanks so much!

[https://OutgoingCuddlyMetadataPortfolio.hopey7319.repl.co]
(https://OutgoingCuddlyMetadataPortfolio.hopey7319.repl.co)

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. :grinning_face_with_smiling_eyes:

html {
scroll-behavior: smooth;
}

2 Likes

@vedantjangid @jwilkins.oboe THANK YOU FOR YOUR REPLIES. It worked鈥:muscle:t4::muscle:t4::muscle:t4:. So happy. However鈥:cold_sweat:鈥 tried it on my other page. It doesn鈥檛 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 =>

  1. 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鈥檚 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. :grinning_face_with_smiling_eyes:

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 :laughing:. 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鈥檛 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 :blue_heart:

1 Like

reading this asap! thanks so much! ill 鈥渢rial & error鈥 all these things. thank you so much for sharing this article @lasjorg .

1 Like

definitely will. working on them now鈥:muscle:t4::muscle:t4::muscle:t4:. thanks bunches! i knew there has to be some specific way鈥:nerd_face::rofl::rofl: that actually exists. or i dont know鈥ust yet鈥:grin::grin:. very helpful @vedantjangid @lasjorg @jwilkins.oboe

will keep y鈥檃ll posted!

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::clap:t4::clap: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::grin:

Oh wait鈥oes 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

hehe thanks! learned something more today. appreciate it鈥:innocent::innocent::innocent::ok_hand:t4::nerd_face: