Menu icon Foundation
Off Canvas Issue

I am just stuck on my off canvas at the moment my mobile and tablet menu-header. It for some reason goes under neath the vertical menu bar once clicks on it. I am trying to get it so once I click on it, it will slide to the right

Also for some reason my #content-body not floating to right one clicked on button.

#menu-header {
  background: #F1750B;
  width: 100%;
  height: 50px;
}

#menu-header span {
  display: none;
}

.navbar {
  background: #25221E;
  margin: 0;
  padding: 0;
  min-height: 50px;
}

.nav {
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav ul {
  margin: 0;
  padding: 0;
  
}

.nav li {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
}

.nav li a {
  display: block;
  color: #FFFFFF;
  font-size: 16;
  font-weight: Normal;
  line-height: 3.07692em;
  padding: 7px 9px 8px;
  text-decoration: none;
}

.nav li a:hover {
  background-color: #3B3935; 
  color: #F58220;
}

#content-body {
  margin-top: 2.5%;
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

/* Small screens  */

@media screen and (max-width: 768px) {
  
  #menu-header {
    transition: all 0.3s ease;
  }
  
  #menu-header span {
    display: block;
    margin: 0;
    line-height: 50px;
    padding-left: 25px;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
  }
  
  .navbar {
      position: fixed;
      top: 0px;
      bottom: 0;
      width: 220px;
      left: -220px;
      height: 100%;
      background: #333333;
      box-shadow: -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25) inset;
      transition: left 0.10s ease;
      z-index:25;
    }
  
  .navbar.active {
    left:0;
  }
  
    .nav {
      margin: 0;
      padding: 0;
      text-align: left !important;
    }
  
    .nav ul {
      margin: 0;
      padding: 0;
      
    }
  
    .nav li {
      display: block;
      position: relative;
      border-top: 1px solid #999999;
    }
  
    .nav li:first-child {
      border-top: none;
    }
  
    .nav li:last-child {
      border-bottom: 1px solid #999999;
    }
  
    .nav a {
      color: #999999 !important;
      font-size: 15px;
    }
  
    .nav a:hover {
      background: #484848 !important;
      color: #FFFFFF !important;
    }
  
    #content-body {
      margin-top: 2.5%;
      float: right;
      width: 100%;
      transition: width 0.3s ease;
    }

}

htmloff canvascssjavascript

I am just stuck on my off canvas at the moment my mobile and tablet menu-header. It for some reason goes under neath the vertical menu bar once clicks on it. I am trying to get it so once I click on it, it will slide to the right

Also for some reason my #content-body not floating to right one clicked on button.

#menu-header {
  background: #F1750B;
  width: 100%;
  height: 50px;
}

#menu-header span {
  display: none;
}

.navbar {
  background: #25221E;
  margin: 0;
  padding: 0;
  min-height: 50px;
}

.nav {
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav ul {
  margin: 0;
  padding: 0;
  
}

.nav li {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
}

.nav li a {
  display: block;
  color: #FFFFFF;
  font-size: 16;
  font-weight: Normal;
  line-height: 3.07692em;
  padding: 7px 9px 8px;
  text-decoration: none;
}

.nav li a:hover {
  background-color: #3B3935; 
  color: #F58220;
}

#content-body {
  margin-top: 2.5%;
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

/* Small screens  */

@media screen and (max-width: 768px) {
  
  #menu-header {
    transition: all 0.3s ease;
  }
  
  #menu-header span {
    display: block;
    margin: 0;
    line-height: 50px;
    padding-left: 25px;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
  }
  
  .navbar {
      position: fixed;
      top: 0px;
      bottom: 0;
      width: 220px;
      left: -220px;
      height: 100%;
      background: #333333;
      box-shadow: -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25) inset;
      transition: left 0.10s ease;
      z-index:25;
    }
  
  .navbar.active {
    left:0;
  }
  
    .nav {
      margin: 0;
      padding: 0;
      text-align: left !important;
    }
  
    .nav ul {
      margin: 0;
      padding: 0;
      
    }
  
    .nav li {
      display: block;
      position: relative;
      border-top: 1px solid #999999;
    }
  
    .nav li:first-child {
      border-top: none;
    }
  
    .nav li:last-child {
      border-bottom: 1px solid #999999;
    }
  
    .nav a {
      color: #999999 !important;
      font-size: 15px;
    }
  
    .nav a:hover {
      background: #484848 !important;
      color: #FFFFFF !important;
    }
  
    #content-body {
      margin-top: 2.5%;
      float: right;
      width: 100%;
      transition: width 0.3s ease;
    }

}
Wing-Hou Chan over 5 years ago

Hey Matthew!

Could you post a link the site! It will help diagnosis!

Brian Davidson over 5 years ago

Using Foundation 5....same issue. Will work on a clean example but the issue seems to be that the height expands only to the size of any content of the inner-wrap div.

Below is my hack which sets a fixed height for the left-menu ; without setting the height value the off-canvas-list scrolls instead of expanding into view.

<div class="off-canvas-wrap">
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu " style="height:300px;">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">Great Coffees</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        ...
      </ul>
    </aside>



  <a class="exit-off-canvas"></a>

  </div>