Content behind the fixed navigation - help from more experienced dev appreciated

1

Hi everyone. I have almost finished the Technical Documentation project. There is one last thing that I need to fix - the nav-bar is on the left-hand side, however, when I resize the browser to a smaller size the nav-bar has position fixed and goes on top of the page. When I click the buttons in the navigation the website should display the content of the page, but instead, it ends up behind the nav-bar, so the content is not seen. I have spent hours researching it and trying to make it work, but no luck. Anyone knows how could I make it work? Your help will be much appreciated. Thanks a lot.

Here is the link to the project - https://codepen.io/Genome22/full/PowxzrJ

2

Really? Does nobody know? :frowning:

3

Remove all padding-top from all the id section selectors you have and add this to the .main-section you already have on all the sections (adjust as needed).

.main-section {
  padding-top: 250px;
  margin-top: -250px;
}

Here are some more techniques for jump links and fixed headers/navs.

Edit: What you really should do is add all the common section styles into that one class selector. There is no reason to repeat styles on different id selectors when you already have the same class on all the sections.

.main-section {
  padding-top: 260px;
  margin-top: -250px;
  padding-left: 2%;
  padding-right: 2%;
  border-bottom: 1px solid black;
}
1 Like
4

Hi @lasjorg. Great. Thanks for the reply, will try to do it, hopefully I will manage. Also thanks for the link for the jump links and fixed headers/navs. :+1:

5

@lasjorg, you are a genius, you are my hero, that has taken me 2 minutes to fix it, and have to say I have learned something new today again. Really appreciate that. Thank you