Menu icon Foundation
Make left sidebar fixed position

I would like to make the left sidebar fix so that when I scroll, only the content is scrollable. I was able to make the topbar fix by adding < div class="fixed contain-to-grid" > I added the same code to line 5 on my code below but the content pane vanished. This is how it currently looks like. It's just a mock - http://i.imgur.com/7hTIv3w.jpg

<div class="container page">
  <div ng-include="'app/components/navbar/navbar.html'"></div>
  <div class="row page">

    <div class="small-12 large-4 columns sidebar">
      <div class="row">

        <a class="medium-6 columns menu-item button">
          <div class="text-center">
            <i class="show-for-large-up fi-page-add></i>
            <p>Task 1</p>
          </div>
        </a>
        <a class="medium-6 columns menu-item button">
          <div class="text-center">
            <i class="show-for-large-up fi-page-edit"></i>
            <p>Task 2</p>
          </div>
        </a>
      </div>
    </div>

    <div class="small-12 large-8 columns content">
      <h4>Task 1 Content</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <div class="form-group large-6">
        <p><input type="text" ng-model="someModel" class="form-control" placeholder="Enter string"></p>
      </div>
    </div>
  </div>
</div>

sidebar

I would like to make the left sidebar fix so that when I scroll, only the content is scrollable. I was able to make the topbar fix by adding < div class="fixed contain-to-grid" > I added the same code to line 5 on my code below but the content pane vanished. This is how it currently looks like. It's just a mock - http://i.imgur.com/7hTIv3w.jpg

<div class="container page">
  <div ng-include="'app/components/navbar/navbar.html'"></div>
  <div class="row page">

    <div class="small-12 large-4 columns sidebar">
      <div class="row">

        <a class="medium-6 columns menu-item button">
          <div class="text-center">
            <i class="show-for-large-up fi-page-add></i>
            <p>Task 1</p>
          </div>
        </a>
        <a class="medium-6 columns menu-item button">
          <div class="text-center">
            <i class="show-for-large-up fi-page-edit"></i>
            <p>Task 2</p>
          </div>
        </a>
      </div>
    </div>

    <div class="small-12 large-8 columns content">
      <h4>Task 1 Content</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <div class="form-group large-6">
        <p><input type="text" ng-model="someModel" class="form-control" placeholder="Enter string"></p>
      </div>
    </div>
  </div>
</div>
Rafi Benkual over 4 years ago

I did this recently and it's posted here: http://zurb.com/building-blocks/sidebar-blog-template

I made the sidebar 100vh and position fixed and the so content is scrollable. Alternatively, you could wrap the page in a frame that is 100vh and the content div overflow scroll.

Bruno Couto over 4 years ago

@Rafi where can I grab the code for the left-sidebar on the Zurb University's site?
Thank you

Onie Camara over 4 years ago

Thank you Rafi. I'll check it out once I get to work.

Rafi Benkual over 4 years ago

@bruno - we'll post it as a building block as soon as we can. May be a week or so.

Onie Camara over 4 years ago

Thanks Rafi. It worked! :D
However, when I shrink my browser to the left, the sidebar is still visible at the back. Now they are overlapping. How can we tell foundation to use only fixed position when in large screen? That means, we don't want position:fixed when screen is small.

Rafi Benkual over 4 years ago

Sure, just use a media query

@media only screen and (min-width: 40.063em) {
  .sidebar {
    position: fixed;
  }
}

Bruno Couto over 4 years ago

@Rafi, that would be amazing, please let me know when you post it as a building block, as soon as possible.
Thanks!

Onie Camara over 4 years ago

Rafi, what does 40.063em mean?

Onie Camara over 4 years ago

I'm good now. I'm now using (min-width: 1025px). It works perfectly :)
Thank you so much!!!

Rafi Benkual over 4 years ago

Awesome! Please mark responses as helpful :)

Onie Camara over 4 years ago

I marked it as helpful yesterday. Which one did I miss?

Rafi Benkual over 4 years ago

Thanks!