CODEWITHSUNDEEP
htmlcss
Dave
Dave

Reputation: 2018

Sticky navbar disappears on scroll

How can I make the sticky navbar stick to top of the page even after I provide a static height on sections below? Now when I scroll to the point of test-section then the nav disappears. How can I avoid this?

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 50px;
  background: blue;
}

.test-section {
  height: 300px;
  background: red;
}
<div>


<div class="header">
  hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve

</p>
</div>
<div class="test-section">
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">

</div>

Upvotes: 0

Views: 1213

Answers (3)

Chanka1021
Chanka1021

Reputation: 71

.header {
  position: fixed;
  top: 0;
  z-index: 100;
  height: 50px;
  background: blue;
}

Upvotes: 0

JDawwgy
JDawwgy

Reputation: 928

Changing from position: sticky; to position: fixed; and also adding width: 100%; to your .header class seems to get the result your looking for

.header {
  position: fixed;
  top: 0;
  z-index: 100;
  height: 50px;
  width:100%;
  background: blue;
}

.test-section {
  height: 300px;
  background: red;
}
<div>


<div class="header">
  hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve

</p>
</div>
<div class="test-section">
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">

</div>

Upvotes: 0

Sam Zack
Sam Zack

Reputation: 37

Use "position: fixed" instead on the class header

Upvotes: 1

Related Questions