vendredi 3 juin 2016

Semantic UI overlapping grid

I'm trying to create a sidebar menu in Semantic UI which will stick to the left side of the page. My code for that is as follows:

<body>

  <div class="ui three column grid doubling stackable fluid">


    <div class="column five wide container">
      <div id='sideMenu' class="ui sidebar floating vertical inverted menu visible">
        <div class="container">
          <div class="item">
            <a href="">
              <i class="home icon"></i> Home
            </a>
          </div>

          <div class="item">
            <a href="">
              <i class="upload icon"></i> Upload
            </a>
          </div>

          <div class="item">
            <a href="">
              <i class="photo icon"></i>
              Album
            </a>
          </div>


          <div class="item">
            <a href="">
              <i class="tags icon"></i>
              Categories
            </a>
          </div>

          <div class="item">
            <a href="">
              <i class="users icon"></i>
              Users
            </a>
          </div>

          <div class="item">
            <a href="">
              <i class="user icon"></i>
              Profile
            </a>
          </div>

          <div class="item">
            <a href=""><i class="sign out icon"></i>Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pusher">
    <div class="ui twelve wide column container">
      @yield('content')
    </div>
  </div>

  </div>

This results in the following: sidebar error

As can be seen from the image, the sidebar overlaps the content grid and hides a part of the other column. How do I fix this? Any help is highly appreciated



from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/1Ul2fGP
via IFTTT

Aucun commentaire:

Enregistrer un commentaire