0

The page I am designing has a fixed header and in the row below it is has two Bootstrap columns, .col-md-2 and .col-md-10.

I am trying to fix the header to the top of the page and the left column (.col-md-2) in the row below it to its position, however when I try to set position: fixed; in the CSS for the header and left column, the entire positioning of my page gets messed up.

Is there any way to safely lock in the position of a column in Bootstrap without throwing off the entire page and maintaining Bootstrap's classic responsiveness?

EDIT: Here is a really, really bad demo but it may give you a better idea of what I'm trying to do. Here is a diagram

The section with HEADER I want to be fixed to the top, the section with ABOUT ME I want to be in a responsive column fixed to the left, and the section with POST I want to be in a responsive, not fixed column to the right that allows for scrolling.

One of the problems with the solution I have now is when I try to decrease the browser-width all of the text in the column to the right gets smushed down and doesn't act like a Boostrapped column would at all.

Zach
  • 4,555
  • 9
  • 31
  • 52

2 Answers2

1

Add .hidden-xs to your .col-md-4 and add .col-xs-12 to your .col-md-8

Once on smaller devices this will hide the left col-4 and let your col-8 keep its place below the header... Hoping that you do not need to keep the col-4 (?)

Edit : I assumed you mistyped, col-8 beeing the right col and not the left one...

JBA
  • 2,889
  • 1
  • 21
  • 38
  • I added a demo and more context to my original question that may help you see what I want to accomplish. – Zach Feb 21 '15 at 21:48
1

The solution you are looking for is a mix of 2 demos :

1st the top navbar (will be the header in your case) fixed by bootstrap here...

2nd this so answer for the left col fixed positioning...

Hope this helps !

Community
  • 1
  • 1
JBA
  • 2,889
  • 1
  • 21
  • 38
  • Thank you so much! Those are both exactly what I was looking for. I'll just need to pad the nav bar down a bit but everything is perfect. – Zach Feb 22 '15 at 10:24