Top navbar overlaps with main content

Question

I'm converting my landing page from Bootstrap to Semantic-UI. The page has a position fixed top navbar. The main content is divided in two columns (3-cols and 9-cols). The left column is used to show a sidebar and the right column is used for current content.

I tried to copy and paste the demo page of Semantic-UI. The navbar is 45px high. I noticed that the first 45px of main content is overlapped.

My current workaround is to add a 45px high placeholder after navbar.

<div style="height:45px"></div>

I'm pretty sure there are some good css style names can fix the content overlapping.

Answer 1

The solution is much simpler. You just need to add a padding to your main container:

<div id="navbar" class="ui fixed inverted main menu">
 <!-- header content here -->
</div>
<div id="content" class="ui container">
 <!-- main content here -->   
</div>

And add in your CSS:

.ui#content{
  // padding should be the same as header height
  padding-top: 55px;
}