title: How to make fixed top menu in Semantic-UI not cover content
body: <p>I have a problem with my fixed-top menu in semantic-ui. It's covering a header element, which says "This is Stoga Hub". I don't think javascript or jQuery will do anything to help. I've tried messing around with margin-top/bottom for the menu and header elements and it worked, but I know my code will become really messy if I have to adjust the margin-top/bottom on every single webpage. I apologize if this has a really simple answer, I'm still very new to website building. Thank you all for your help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var main = function() {
    $('.ui.dropdown').dropdown({
      on: 'hover'
    });
    $('.item').click(function() {
      $('.item').removeClass('active');
      $(this).toggleClass('active');
    });
    $('.ui.checkbox')
      .checkbox();
  };
  $(document).ready(main);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    height: 600px;
    background: linear-gradient(to right, #16a085, #2c3e50);
    position: absolute;
    /*margin-top: 78px;*/
  }
  
  .ui.header {
    font-size: 65px;
  }
  
  body {
    background-color: #ecf0f1;
    color: white;
  }
  
  .segment {
    background-position: 50% 50%;
    margin: auto;
  }
  
  .menu {
    padding-top: 8px;
    padding-bottom: 8px;
    color: maroon;
    position: relative;
    /*margin-bottom: 62px;*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Menu --&gt;
  &lt;div class="ui large top fixed transparent menu"&gt;
    &lt;div class="ui container"&gt;
      &lt;a class="active item"&gt;"Logo"&lt;/a&gt;
      &lt;div class="ui dropdown item"&gt;
        &lt;div class="text"&gt;Members&lt;/div&gt;
        &lt;i class="dropdown icon"&gt;&lt;/i&gt;
        &lt;div class="menu"&gt;
          &lt;a class="item" href="http://tesd.net/stoga"&gt;CHS Website&lt;/a&gt;
          &lt;a class="item" href="http://stogamusic.com"&gt;Stoga Music&lt;/a&gt;
          &lt;a class="item" href="http://stoga.net"&gt;Stoga Library Index&lt;/a&gt;
          &lt;a class="item" href="http://spoke.news"&gt;Spoke News&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui dropdown item"&gt;
        &lt;div class="text"&gt;Clubs&lt;/div&gt;
        &lt;i class="dropdown icon"&gt;&lt;/i&gt;
        &lt;div class="menu"&gt;
          &lt;a class="item" href="../Main%20Files/clubs.html"&gt;Club List&lt;/a&gt;
          &lt;a class="item"&gt;Register a Club&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui dropdown item"&gt;
        &lt;div class="text"&gt;Useful Stuff&lt;/div&gt;
        &lt;i class="dropdown icon"&gt;&lt;/i&gt;
        &lt;div class="menu"&gt;
          &lt;a class="item" href="https://pinnacle.tesd.net/Pinnacle/PIV/Logon.aspx?ReturnUrl=%2fPinnacle%2fPIV%2fDefault.aspx"&gt;Pinnacle&lt;/a&gt;
          &lt;a class="item" href="https://connection.naviance.com/family-connection/auth/login/?hsid=conestoga"&gt;Naviance&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui dropdown item"&gt;
        &lt;div class="text"&gt;About&lt;/div&gt;
        &lt;i class="dropdown icon"&gt;&lt;/i&gt;
        &lt;div class="menu"&gt;
          &lt;a class="item" href="../Main%20Files/whoWeAre.html"&gt;Who We Are&lt;/a&gt;
          &lt;a class="item" href="../Main%20Files/Calendar.html"&gt;Calendar&lt;/a&gt;
          &lt;a class="item" href="../Main%20Files/contact.html"&gt;Contact Us&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right menu"&gt;
        &lt;a class="item"&gt;&lt;i class="sign in icon"&gt;&lt;/i&gt;Login&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="ui fluid main container"&gt;
    &lt;div class="segment"&gt;
      &lt;div class="ui container"&gt;
        &lt;h1 class="ui header"&gt;This is Stoga Hub&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>