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.

<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.

Solution 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;
}

Solution 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>

Solution 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.

Comments

[stanleyxu2005]

It looks getting closer to a solution, except the height of sidebar cannot fit browser window.

[niba]

Why do you want to use sidebar? Its not better to take the vertical menu component? Sidebar is better when you want to get pushable content in the page

[stanleyxu2005]

I tried a vertical menu, but it doesn't look the same as a sidebar. There is a shadow right to the side bar. There will be dividers between menu items, when using sidebar.

[niba]

For me in your case vertical menu is better option. If you don't like how it looks you can always modify them and create your own. Here is a link to the instruction learnsemantic.com/themes/overview.html how to do it.

[stanleyxu2005]

This is actually my no brainer solution. Really practical.

[Admin]

I'm a beginner at this so excuse my simple questions :) So the only thing that we actually have to do is what comes after the "And add in your CSS:", right? Just putting the css seen ( .ui#content etc. ...) into the bootstrap.css file? And second question, should that css be added in any particular place within the bootstrap.css file, or just put at the very end of the file?

[Admin]

Oh - and, it says "padding should be the same as header height". How do you know what the header height is?