Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Bootstrap — attempt to affix aside panel Reply To: Bootstrap — attempt to affix aside panel

#193679
Shikkediel
Participant

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).