15

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.

stanleyxu2005
  • 8,081
  • 14
  • 59
  • 94
  • There is no `id="container"` element in your code. – phts Feb 20 '15 at 10:59
  • It would be better if you make a jsfiddle which introduces you problem. – phts Feb 20 '15 at 11:03
  • Thought I'd point out for anyone using gulp builds, if you have a fixed menu followed by a 'grid' element, you can customize the grid top margin using the '@fixedPrecedingGridMargin' variable in your menu.variables file. – Kishan Nov 19 '17 at 21:25

3 Answers3

6

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;
}
Ronen
  • 734
  • 1
  • 9
  • 14
  • This is actually my no brainer solution. Really practical. – stanleyxu2005 Oct 21 '15 at 16:48
  • 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? –  Apr 22 '17 at 04:06
  • 4
    Oh - and, it says "padding should be the same as header height". How do you know what the header height is? –  Apr 22 '17 at 04:25
3

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>
niba
  • 2,821
  • 1
  • 19
  • 23
  • It looks getting closer to a solution, except the height of sidebar cannot fit browser window. – stanleyxu2005 Feb 21 '15 at 02:39
  • 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 – niba Feb 21 '15 at 08:44
  • 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. – stanleyxu2005 Feb 21 '15 at 13:31
  • 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 http://learnsemantic.com/themes/overview.html how to do it. – niba Feb 21 '15 at 13:39
1

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.

Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
I_Khanage
  • 456
  • 1
  • 6
  • 8