Hello! I'm nearly finished with my pet Pollinator's profile, and had a question about making the navigation smoother for the viewer. Whenever I click on the navigation links, the profile displays the section as intended, but "jumps" to it, rather than just making it visible. here's a link to his profile so you can see what I'm talking about--just click any of those navigation links.

Is it possible to make it so clicking on the link doesn't make the page jump to the header, and instead just displays the content in each separate div? It's not a huge deal, but for me it feels a little disorienting. I hope I'm making sense describing this issue as well.

Thank you for your help!

you would need to change how the navigation links work in the background but it's "complicated" like lots to do and hard to explain but

A dummy example

<style> input, .titleone, .titletwo { display: none; }

input[id=titleone]:checked ~ .titleone, input[id=titletwo]:checked ~ .titletwo { display: block; } </style>

• input selector makes the input element invisible otherwise there be radio buttons
• you can probably make the content boxes all invisible with a catch all rule but the make this content block visible needs to be done individually

that should cover just the basics of the set up

anything confusing or need more details or such please lmk... i'm very tired usually try to be thorough on everything but I'd need sleep and much more time to do that and decided this now is better than the "perfect" answer

Thank you so much for your help!! While I was researching this issue on my own, I came across people mentioning the radio button workaround, but couldn't wrap my head around it at all--you're the first person who explained it in a way that I could understand! I followed your help and it's working exactly how I want it to.

For styling the links themselves--that I'm struggling with. It seems like when I try to isolate the navigation labels, I either change all the content, or nothing happens at all. I'm an absolute beginner when it comes to coding, so I'm probably missing something really obvious. How can I style the CSS for the navigation text so it looks like links?

Thank you again!

I'll just put an example of the selector that should work without any issue and will affect all the links

label.tab:hover { text-decoration: underline; color: cornflowerblue; }

-Selector grabs anything that is a label element then narrows it down with ".tab" so element that is a label and with the class of "tab" then the 'sudo class' comes into play this one ":hover" which activates when the cursor is over the element

• the colour chosen was basically random

That worked perfectly--thank you again for all your help! I've learned a lot, too!