Top navbar overlaps with main content - html

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.
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>
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;
}

Answer 2

You have to wrap your page content in grid class:
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div class="ui grid">
<div class="row">
<div class="column">
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

What you could do is set a height on the content div and then set overflow:scroll. This way any long content will scroll in the div and it won't move up the page and under the nav bar.