CODEWITHSUNDEEP
htmlcss
yoonsi
yoonsi

Reputation: 754

How to properly deal with a fixed navigation bar at the top of a webpage?

Let me explain a little more.

I've been making a webpage and I have a navigation bar at the top. I decided that I'd like it to be fixed and always showing at the top of the page.

When I did this, the top of the content which used to be below the navigation bar is now slipping underneath it because the bar does not take up that space anymore.

Is there a proper way to deal with this? I can add padding to the top of the content which means it doesn't start beneath the nav bar but this seems like it's not the best solution. Alternately I could make an invisible div beneath the navigation bar so that the space is taken up...

Any thoughts? I will add screenshots as soon as I'm able.

I'm using the "position: fixed" property for the navigation bar.

Upvotes: 1

Views: 618

Answers (2)

DawnPatrol
DawnPatrol

Reputation: 156

The best solution I've seen in practice is to wrap all the content (including the header) in a wrapper div. Keep your header's styles the same

position:fixed; top: 0;

and then set padding to the top of the wrapper div that equals the header's height.

Upvotes: 0

nicael
nicael

Reputation: 18997

This is how I do it most of the times. A margin to the main section and same to the topbar, with minus.

*{
  font-size:20px;
}
topbar{
  position:fixed;
  margin-top:-20px;
	
  display:block;
  background:red;
  width:100%;
}
main{
  margin-top:20px;
	
  background:yellow;
  width:100%;
  padding-right:10px;
}
<topbar>Hey there</topbar>
<main>
  Here is<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
</main>

You can ignore all the other styles - they are for aesthetic reasons :)

Upvotes: 1

Related Questions