Create Fixed Sidebar and Header using CSS3 Flexbox

With the release of Flexbox in CSS3, Creating the layout process has been very much simplified. In this article, I will show you how to create a fixed sidebar and header using only Flexbox. The result of the sample code will look like this:

You know that position: fixed is used to create a fixed content. But in flexbox, fixed positioned elements will not be in the flow of flex. To create fixed sidebar in flexbox, We have to remove the scroll option from body and HTML tags and create a flex container with the height: 100vh [vh = viewport height] which will have the sidebar and main content of our page as a flex item. I will guide you step by step with HTML skeleton and CSS. The complete code is packed up in a zip file, you can download it.

Remove Scrollbar from Body:

body {
  overflow-y: hidden;
}

To hide the default scroll bar in a browser, we set the value of the overflow-y property to hidden in the body tag.

Creating Fixed Header using Flexbox

<header class="main-header">
  <div class="main-header-content">
      <h1>Fixed Sidebar with Flexbox Demo</h1>
  </div>
</header>

.main-header {
    background: #0596d8;
    padding: 10px;
    box-shadow: 1px 2px 3px #ccc;
    color: white;
    display: flex;
    flex-flow: row nowrap;
}

.main-header-content {
    flex: 1 0 auto;
}

The main-header class is the flex container of our header, It has display: flex property and flex-flow: row nowrap property which tells its flex items to show content in a row. The main-header-content class is the only flex item of the main-header class which has flex property with three values.

1. flex-grow is set to 1, so the header will use the entire width available in the browser.
2. flex-shrink is set to 0 because we have only one flex item, there is no need to shrink the item.
3. flex-basis is set to auto, so that browser will calculate the width based on viewport size.

Create a Fixed Sidebar using Flexbox

<section class="wrap-whole">
   <!-- fixed vertical sidebar -->
   <section class="vertical-nav-bar">
      <div class="menu-container">
         <div class="main-nav-link">
            <a href="#">
               <i class="fa fa-home main-nav-icon"></i>
               <div>Home</div>
            </a>
         </div>
      </div>
      
      <div class="menu-container">
        <!-- more links you can add -->
      </div>
   </section>
 
  <!-- main content of the page -->
   <section class="container__main">
       <header class="container__header">
           <h1>Hello How are you?</h1>
       </header>
           
       <article class="container__content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Morbi in ligula vitae nisl scelerisque efficitur. Sed sed erat more.... </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Morbi in ligula vitae nisl scelerisque efficitur. Sed sed erat more.... </p>
         <p> <!-- more paragraphs here --> </p>
       </article>
   </section>
</section>

.wrap-whole{
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-between;
  height:100vh;
}

The wrap-whole class is the parent flex container of vertical-nav-bar and container__main classes. It has a flex-flow: row and justify-content: space-between for the flex items. We should set the height of the container to the height of viewport height: 100vh so that we can give the look of a fixed sidebar.

Fixed Vertical Sidebar

<section class="vertical-nav-bar">
  <div class="menu-container">
     <div class="main-nav-link">
         <a href="#">
           <i class="fa fa-home main-nav-icon"></i>
           <div>Home</div>
          </a>
     </div>
  </div>
</section>

.vertical-nav-bar {
    display: flex;
    flex: 0 0 100px;
    flex-flow: column nowrap;
    text-align: center;
    z-index: 30;
    background: #061e2a;
    background: linear-gradient(to right,#fefefe, 99%, #8c8c8d);
    padding: 1rem 0 0 0;
    justify-content: flex-start;
}

.menu-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
}
.main-nav-link {
    transition: opacity .2s, visibility .2s;
    flex: 1 1 auto;
    align-self: center;
    display: flex;
    position: relative;
}
.main-nav-link a {
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.04rem;
    color: #03A9F4;
    padding: 0.75rem 0.5rem;
    text-transform: uppercase;
    
}

The above HTML is the layout of the fixed vertical sidebar. The vertical-nav-bar class is the flex container and also the first flex item of wrap-whole. It has flex: 0 0 100px, which sets the flex-basis: 100px (min width of the flex item), flex-grow and flex-shrink are left to 0, so that there is no growth and shrink in flex items. The flex-flow: column in vertical-nav-bar and menu-container set the vertical flow to the flex items (icons or links in our menu).

Scrollable Main Content

 <section class="container__main">
       <header class="container__header">
           <h1>Hello How are you?</h1>
       </header>
           
       <article class="container__content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Morbi in ligula vitae nisl scelerisque efficitur. Sed sed erat more.... </p>
       </article>
</section>

.container__main {
    flex: 1 1 600px;
    overflow-y: auto;
}

The container__main class is the second flex item of the wrap_whole class.  By setting the overflow-y property to auto in the container__main class, we display the scrollbar for the container__main which in turn gives us the feel of a fixed vertical sidebar.

Points to remember when creating fixed sidebar & header using flexbox

• Hide the default scrollbar by adding overflow-y: hidden to the body tag.
• Create a flex container with the property height:100vh.
• Don’t add the overflow property to the sidebar.
• Add overflow: auto to the main content of the page to get the scrollbar.

Hope, this method helps. If you know any other methods or suggestions, make a comment below. Thank You!