CSS - fixed navbar causing problems on window resize

Question

I am trying to create a navbar that always stays at the top, which I did, but I am having problems with the content on the page that goes under it and you can't see it. I found that to fix this, I needed a 5% margin from the top of the body, but whenever I resize the width of the page, it affects the margin-top. How would I get it so that the margin-top stays the same when resizing the width of the page? An example of what I want is the Instagram navbar (website), like how the photos don't go overlapping the fixed navbar and on page resize it remains the same top margin.

HTML

<div>
     <div className="menu">
         <div className="left">
            <h1>PostNote</h1>
         </div>
         <div className="right">
            <span className="menu-item"><Link to="/">Home</Link></span>
            <span className="menu-item"><Link to="/searchNotes">Notes</Link></span>
            <span className="menu-item"><Link to="/addNote">Add a Note</Link></span>
            <span className="menu-item"><Link to={`/users/${Meteor.userId()}`} >My Profile</Link></span>
         </div>
     </div>
</div>

CSS

body{
  padding-left: 20%;
  padding-right: 20%;
  margin-top:5%;
}
.menu{
  background: #F1F1F1;
  width:100%;
  height:10vh;
  position: fixed;
  left:0px;
  top:0px;
  z-index: 10;
}
.menu-item{
  margin:5px;
  font-size:1.4em;
  color:black;
}

score 0 · Accepted Answer · answered Aug 28 '17 at 23:40

On some properties, the percentage unit will always use the percentage of the width. Margin is one of these properties, so when you are setting margin-top: 5%; it is using 5% of the body's width.

Instead, you could use vh. This unit is a % of the viewport's height. Therefore 1vh = 1% of the viewport height.

See 'Viewport-percentage lengths' here.

Also see this question.

body{
  padding-left: 20%;
  padding-right: 20%;
  margin-top:5vh;
}

CSS - fixed navbar causing problems on window resize

1 Answers1