Bootstrap — attempt to affix aside panel

[mhfein]

HI,
I am working in bootstrap 3 and i want to affix an aside with a panel in it. IT is essentially a left menu for my pages and i would like it not to scroll with the page. I’ve tried lots of things to no avail. Does anyone have any idea for me? Check out my test page at
http://www.awakeningjoy.info/2015Test/bootstrap/aboutTheCoursePinLeftMenu.html

My social media icons pin nicely on the right, but my left menu just disappears.

Thanks for any ideas!
Mary Helen

[Shikkediel]

Hi, you could use position: fixed (that is what is used for the icons) on the element with class .panel-default but that will be a bit tricky. If the menu is larger than the screen itself, any overflow will be hidden. This is not an issue with the icons because the dimensions are small. Another thing is that on smaller screens, the layout will be different – I think you’ll want the side menu to not be fixed then. Looks like it switches at 768 pixels width. You could adapt the @media rules in the CSS for this.

It could work if the side menu is made as small (in height) as possible – 600 pixels minus the height of the top banner maximum (so it’ll still fit on a 800×600 screen). What could be a nice touch is if it scrolls with the page at first but stops and stays fixed when it reaches the top of the window. It’ll give some more room for height as well. This could be done with jQuery.

On more thing – the icons disappear underneath the menu on smaller screens. Adding z-index: 1 in the CSS to the .socialMedia class will prevent this from happening.

Hope that helps (it’s a bit complicated).

[mhfein]

Hi, Thanks so much for your response. I put the position fixed on the social media and that was a nice fix as now it no longer slides under other page elements.

You suggested a position fixed on the element with the class .panel-default. I do have a position fixed on the aside which wraps the panel-default. I put that CSS right into the page itself
(https://awakeningjoy.info/2015Test/bootstrap/aboutTheCoursePinLeftMenu.html line 9)

But i added more CSS there to set the panel-default to fixed as well, but it didn’t seem to change anything.

Yes, your answer is complicated but i am quite grateful and will continue to work to implement your suggestions as i figure it all out!

[Shikkediel]

There is a dot missing in front of panel-default on line 8. ;-)

.panel-default {
position: fixed
}

[Author]

Posts