HTML/CSS problem in Product Landing Page project

HTML/CSS problem in Product Landing Page project
0

#1

My problem is when you click one of the 3 links in the top nav bar (Search Holidays, FAQ, Contact), the links work and take you to the relevant section, but the top of that section is hidden by the fixed nav bar.
How can I make it so the top of the relevant section starts underneath the nav bar?
Thanks!


#2

The problem is that when you jump to a section, the browser window will scroll to the provided id (which will end up at the top of your window, indeed right behind your sticky header).

Maybe you can add some extra elements to your page and link to those elements instead of to your boxes. You can then style these elements, with the purpose of providing space between the extra element and the section. When you link to the new element, that new element will be at the top of your window. Because there is just enough space below that element (approximately the height of your header), your section will be completely visible.

So, for your search holiday section the steps are:

  1. add an extra element right above your box1 div, e.g.:
<span id = "target1"></span>
  1. create space between your new element and your section:
#target1{
  margin-top: -120px;
  padding-bottom: 120px;
  display:block;
}
  1. change the Search Holidays link in your header so it links to #target1 instead of #box1

For more about this trick and a cleaner way of doing this with pseudo-elements see this CSS-tricks article.


#3

Thanks for the solution, works perfectly.
Also thanks for the article, will have a read!