2

So I have a sticky navbar with a dropdown that allows me to jump to different sections of my page. However, when I jump to a different section, the navbar covers the start of the div I jump to. I checked the navbar, and it has a height of 58 with padding and everything. How do I offset the jump by 58 pixels so that the div is flush with the sticky top and not blocking the header that starts the div?

For example below, here's my website with

enter image description here

And when I click "Education", it cuts off the header saying education and isn't flush with my navbar.

enter image description here

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
drewkiimon
  • 591
  • 1
  • 9
  • 16
  • If you share your code its much easier to help you. – Masoud Keshavarz Feb 03 '18 at 05:25
  • This question is INCORRECTLY marked as duplicate. The alleged duplicates discuss the case where a .navbar has the .fixed-top class, while this question asks about .navbar with a class of .sticky-top. These are two vert different cases, as .fixed-top removes the .navbar from the normal layout, while .sticky-top does not. – Lubo Antonov Mar 15 '18 at 17:04

1 Answers1

5

You can use the :before pseudo class to create a hidden space at the start of the section.

Stack Snippet

body {
  margin: 0;
}

ul.menu {
  background: #000;
  margin: 0;
  position: sticky;
  top: 0;
}

section[id]:before {
  display: block;
  height: 38px;   /* equal to the header height */
  margin-top: -38px;  /* negative margin equal to the header height */
  visibility: hidden;
  content: "";
}

ul.menu li {
  list-style: none;
  display: inline-block;
}

ul.menu li a {
  color: #fff;
  padding: 10px;
  display: block;
  margin-right: 20px;
}

section {
  height: 500px;
}
<ul class="menu">
  <li><a href="#link1">Link1</a></li>
  <li><a href="#link2">Link2</a></li>
</ul>
<section id="link1">Link1</section>
<section id="link2">Link2</section>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • Thanks for your reply. Trying to do this right now. If it works out, I'll let give you the green check mark! – drewkiimon Feb 03 '18 at 04:52
  • Still having some difficulties. I'm trying to go to each div manually, and call :before (or ::before) with their id. For example, #resume::before{ display: block; height: 38px; /* equal to the header height */ margin-top: -38px; /* negative margin equal to the header height */ visibility: hidden; content: ""; } To no avail though. :/ – drewkiimon Feb 03 '18 at 05:12
  • @AndrewPagan it may be your other css code...could you share a working code [**here**](https://fiddle.jshell.net/) – Bhuwan Feb 03 '18 at 05:24
  • just paste your code in the fiddle and save it...then paste the url in the comments.... – Bhuwan Feb 03 '18 at 06:29
  • @AndrewPagan I have changed some of your code...have a look...https://fiddle.jshell.net/bhuwanb9/6gh59ksp/1/ – Bhuwan Feb 03 '18 at 07:13
  • How did you even do that. I did the same exact code and got squat – drewkiimon Feb 03 '18 at 07:25
  • Not a very intuitive answer. – drewkiimon Feb 03 '18 at 07:33
  • @AndrewPagan why not intuitive... – Bhuwan Feb 03 '18 at 07:38
  • @AndrewPagan As a reference of this solution you can check **bootatrap4 official** website....follows the same solution...Try to inspect the this link https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match.... try to check how right side link goes to their respective ids – Bhuwan Feb 03 '18 at 09:04