KPC
Kevin Powell - Community•3y ago
Hmm

Fixed Navbar

Is there any way to fix the navbar at the top while the sibling container shouldn't overlap with nav , it should start after nav 
<div class="parent">
<nav></nav>
<div class="sibling"></div>
</div>
<div class="parent">
<nav></nav>
<div class="sibling"></div>
</div>
Currently I am using position fixed on nav but sibling div is overlapping . Since nav don't have a fixed hieght so I can't give fixed pixel margin-top to sibling
1 Reply
Wolle
Wolle•3y ago
If your parent is the scrolling container its simple: 
nav {
  position: sticky;
  top: 0;
}
nav {
  position: sticky;
  top: 0;
}
If something above parent is the scrolling container: 
.parent {
  padding-top: [height of your nav];
}
nav {
  position: fixed;
  inset: 0 0 auto 0;
}
.parent {
  padding-top: [height of your nav];
}
nav {
  position: fixed;
  inset: 0 0 auto 0;
}
Your nav does not need a fixed height, you can set the padding-top inside media queries. (I would prefer the first solution though)

Did you find this page helpful?