Left side div is not aligning properly in bootstrap [duplicate]

Answer 1

When your left sidebar gets position: fixed it is taken out of the flow of the page, which means the main content moves over to take its place.

A way to solve this is by adding a margin to the main content when you scroll. The margin should be equal to the amount of space occupied by the sidebar (33.333%).

You haven't tagged your question with jQuery, but if you are open to it here is a possible approach. You may have to tweak the numbers using media queries.

var onResize = function() {
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};
$(window).resize(onResize);
$(function() {
  onResize();
});

$(document).ready(function() {
  $('body').scrollspy({
    target: '#mainNavbar',
    offset: 10
  });
});

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll > 0) {
    $("#content").addClass("fix");
  } else {
    $("#content").removeClass("fix");
  }
});

html,
body {
  height: 100%;
}

body {
  padding-top: 50px;
}

.navbar-nav {
  float: left;
  margin: 0;
}

.navbar-nav>li {
  float: left;
}

.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-offset {
  top: 0px;
}

.container {
  background: #ccc;
}

.affix {
  top: 20;
}

#content.fix {
  margin-left: 33.333333%;
}

  
  
  
  
  
  



  

    
Title and logo here
  

  

    

      

        


        

          

            
Desert
            
Lighthouse
            
Tulips
            

              
                    Animals 
                  
              

                
Jellyfish
                
Penguins
              
            
          
        
      
      

        

          
Desert
          
The Affix plugin allows an element to become affixed (locked) to an area on the page.
        
        

          
Lighthouse
          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        
        

          
Tulips
          
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
        
        

          
Jellyfish
          
But I must explain to you how all this mistaken idea of denouncing.
        
        

          
Penguins
          
Li Europan lingues es membres del sam familie.