Jump to content

Archived

This topic is now archived and is closed to further replies.

Mike Becker

How to make a Fixed Sidebar?

Recommended Posts

Mike Becker    3
Mike Becker

Hello, 

 

I would like to have a scrolling sidebar or fixed sidebar - referred to by Bootstrap as n affixed sidebar. See an example here: http://getbootstrap.com/javascript (Sidebar is on the left and it scrolls with the content).

 

So I figure since there are options for fixed navbar and scrollspy, that there should be a way to make the sidebar scroll-able. 

 

Does adding the .fix or .fix-top to the <div> class make sense? I've tried some examples with zero results. An example code I attemped is the following: 

 

It would be great to gain some insight.

 

Thanks ahead!

 

Mike

 

Example code for Affix Sidebar:

<header> 
<div class="well"> 
  <h1>Header</h1>
</div>
</header>

<div class="container">
<div class="row">
  <div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav affix-top" data-spy="affix" data-offset-top="100">
      <li class="header"><h3>Sidebar</h3></li>
      <li class="active"><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
      <li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
      <li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>
      <li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
      <li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
    </ul>
  </div>
  <div class="span9">
    <h1>Main</h1>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
    eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
    
    <br>
    
    Eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
  
   <br>
    
    Qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
  
    <br>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
    
  </div>
</div>
</div>

Mike Becker 

 
 

 

Share this post


Link to post
Share on other sites
Mike Becker    3
Mike Becker

And I figured it out. All you have to do is add some custom CSS (position: fixed;) to the "Custom CSS" in DMS as follows:

 

ul.sidebar_widgets {
position: fixed;
}
  • Like 2

Mike Becker 

 
 

 

Share this post


Link to post
Share on other sites
Rob    547
Rob

Excellent!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • ppotent
      By ppotent
      Any chance of a pagelines table plug-in coming? I know that the use of short codes and bootstrap can achieve this, but I can't seem to find any easy/visual editor way of doing this. There are table plug-ins around for wordpress, but honestly, they are pretty clunky. I'd pay for a tables plug-in, given how much I would use tables if I could.
       
       
    • nandorj78
      By nandorj78+
      I checked the demo for the new bootstrap theme (http://themes.pagelines.com/bootstrap/) and I really liked the slider on it. I suppose it was not done using 'impulse' or 'flick slider', was it? How was it done?
    • micstepl
      By micstepl+
      is Bootstrab (http://getbootstrap.com/ ) kompatible to PL5? how to install most fitting?
    • respectgb
      By respectgb+
      Hi,
      I'm having problems with bootstrap popovers being cut off the edge of the browser. I'm using the latest version of dms (2.2) and this problem occurs on all browsers tested. Please can you let me know how we can fix this?

      Cheers

    • dawsonbarber
      By dawsonbarber+
      I added a background image to a container that has a textbox in it, then added a background overlay.
      The overlay "overlaid" the textbox content as well as the container background image.
      Fixing it was simple enough: I reduced the z-index on .pl-bg-overlay to 0.
×