title: How to keep vertical menu items from going behind top fixed menu in Semantic UI?
body: <p>I'm trying to have both a top fixed menu and a left vertical menu on my website. I really want both to be fixed but if I start to scroll then the left vertical menu will slide up underneath the top menu as shown in the code below and the jsfiddle:</p>
  
  <pre><code>&lt;div class="ui inverted top fixed menu"&gt;
    &lt;div class="header item"&gt;
      Top Menu Header
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ui grid"&gt;
    &lt;div class="four wide column"&gt;
      &lt;div class="ui inverted left vertical fluid menu" id="side-menu"&gt;
        &lt;div class="item"&gt;
          Item #1
        &lt;/div&gt;
        &lt;div class="item"&gt;
          Item #2
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="twelve wide column"&gt;
    &lt;!-- Main content here --&gt;
      &lt;div class="row"&gt;
        Text here
      &lt;/div&gt;
      &lt;div class="row"&gt;
        Text here
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/318ruL3j/2/" rel="nofollow noreferrer">https://jsfiddle.net/318ruL3j/2/</a></p>
  
  <p>If I use a fixed vertical menu, then the first item is hidden underneath the top menu as shown in the code below and the jsfiddle:</p>
  
  <pre><code>&lt;div class="ui inverted left vertical fixed menu" id="side-menu"&gt;
    &lt;div class="item"&gt;
      Item #1
    &lt;/div&gt;
    &lt;div class="item"&gt;
      Item #2
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ui inverted top fixed menu"&gt;
    &lt;div class="header item"&gt;
      Top Menu Header
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ui grid"&gt;
    &lt;!-- Main content here --&gt;
    &lt;div class="column"&gt;
      &lt;div class="row"&gt;
        Text here
      &lt;/div&gt;
      &lt;div class="row"&gt;
        Text here
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/z5vozbts/2/" rel="nofollow noreferrer">https://jsfiddle.net/z5vozbts/2/</a></p>
  
  <p>I hope what I'm trying to do makes sense. Does anyone know how I can have both of these fixed menus without my items getting overlapped?</p>