0

I have an issue with a nav bar. When a link in the nav bar is clicked, I want the page to display the section, beginning with the header, just under the nav bar. But instead the header part is overlapping with the header title so you can't see it. See JSBin example here. I tried using the solution from this question but wasn't able to get it to work.

An abridged example of the HTML for one section:

  <section id="s1" class="anchor"><h3>This is section 1</h3><br></section>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
garson
  • 1,505
  • 3
  • 22
  • 56

1 Answers1

0

I checked your JSBin code, here is the CSS:

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  background-color: #aaa;
  justify-content: space-around;
  align-items: center;
  /* background-color: #eee; */
}

therefore, it's definetely position: fixed;, I changed it to position: relative;, and is working perfectly.

  • I'm trying to skip to the section header instead of the section contents. I tried ```position: relative``` but that didn't work: https://jsbin.com/nefogatubu/1/edit?html,css,output – garson Jul 18 '21 at 18:24
  • it can be caused because by default, the `
    ` element is fixed `position`. perhaps, you could make your own section with a relative position? Besides, it would be cool to fully customize the section! :)
     –  Jul 18 '21 at 18:51
  • but before that, let me mess around with the JSBin you made, to see if I could somehow get it working. –  Jul 18 '21 at 18:53
  • I found the problem, the position for all `section` tags IS fixed, I changed it to relative and it's working fine. –  Jul 18 '21 at 18:59
  • I changed both the headers and section tags to relative. However, now the nav bar is not visible when it skips lower. I think I may have figured out another solution though. Let me know if you meant something else. Here is the JSBin where they're changed to relative : https://jsbin.com/fuxemutopu/edit?html,css,output – garson Jul 19 '21 at 00:01
  • `@garson` So you do want it to be fixed position, following the scroll on the screen? You might want to make it **`position: sticky`** then. _Here's_ an example: https://codeconvey.com/stick-div-on-scroll/ PS: Hope this helps! –  Jul 19 '21 at 13:39