How to Create a Fixed Sidebar Navigation in a Fluid Twitter Bootstrap 2.0 Layout?

Creating a Fixed Sidebar Navigation in Fluid Twitter Bootstrap 2.0

In a fluid Bootstrap 2.0 layout, maintaining a fixed sidebar navigation while scrolling can be achieved. Here's how:

1. Create a Custom Sidebar Class:
   Define a CSS class for the fixed sidebar, such as .sidebar-nav-fixed. Assign it properties like position: fixed, top, and width.
2. Create an Offset Content Class:
   To compensate for the left margin created by the fixed sidebar, add an offset class to the content div. For example, .row-fluid > .span-fixed-sidebar can have a margin-left property equal to the width of the fixed sidebar.

3. Updated CSS:

   .sidebar-nav-fixed {
       padding: 9px 0;
       position: fixed;
       left: 20px;
       top: 60px;
       width: 250px;
   }
   
   .row-fluid > .span-fixed-sidebar {
       margin-left: 290px;
   }

4. Responsive Modifications:
   To adapt to different screen sizes, consider using media queries. For instance:

   @media (max-width: 979px) {
       .sidebar-nav-fixed {
           position: static;
           width: auto;
       }
   }

5. Additional Method for Mobile View:
   To maintain a fixed sidebar until it becomes static for small screens, adjust the CSS as follows:

   @media (max-width: 767px) {
       .sidebar-nav-fixed {
           position: static;
           width: auto;
       }
   }

Note: For Bootstrap versions later than 2.0.4, consider using the Affix jQuery plugin, which provides similar functionality.

The above is the detailed content of How to Create a Fixed Sidebar Navigation in a Fluid Twitter Bootstrap 2.0 Layout?. For more information, please follow other related articles on the PHP Chinese website!