Kevin Powell - Community•2y ago

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•2y 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)

Gaming

Programming

Fixed Navbar