Foundation grid with fixed-width sidebar

by jorgeluis

HTML

<div id="navbar">Sidebar with navigation
  
    <nav class="menu">
      <a href="#">listItem1</a>
      <a href="#">listItem2</a>
      <a href="#">listItem3</a>
    </nav>
  
  </div>
  
  <div id="main" class="row">
  
    <div class="medium-6 column">medium-6</div>
    <div class="medium-6 column">medium-6</div>

  </div>

CSS

html, body {
  height: 100%;
}

#navbar {
  padding: 20px;
  background: cadetblue;
}

@media screen and (min-width: 768px) {
  
  #navbar {
    height: 100%;
    float: left;
    width: 200px;
    padding: 20px;
  }
  
  #main {
    padding-left: 240px;
  }

}