Hello I just want to learn how is the propper way to fix the problem of a navbar overlapping the top content of the sections when pressing the links. I put this example, I am not talking about the index I am talking about the top/ margin-top when pressing the link of the sections.
Thanks a lot! I try so many solution but still can’t figure out!
Give each section a padding-top:... value that is slightly taller than the nav bar’s height. This will push the content down in each section.
When an internal link in your nav bar is clicked, the element with that id is brought to the top of the window. Which is fine, so long as the CONTENT within that element has been pushed down to display below your fixed nav bar.
Thanks for the answer but I dont want to get extra padding.
I found this solution works for this projects.
adding a fake h1 on the sections to jump and add this.
::before { content: ""; display: block; height: 100px; /* fixed header height*/ margin: -100px 0 0; /* negative fixed header height */ background-color: $primary-color; }
Is not the best solution though I have to do it in each section and add the backcolour of the section before.