I am trying to make a left-side menu for the hero theme of bootstrap
(can also be applied to fluid, but I'm particularly interested in
hero) and here's what I've done so far:
.my_menu {
display: inline-block;
float: left;
list-style-type: none;
margin-top: 0px;
margin-left: 100px;
position: fixed;
top: 40px;
bottom: 0;
left: auto;
}
This works perfectly on a resolution greater than 1280px wide. As soon
as I shrink it, the menu gets overlayed on top of the main container.
I tried making my_menu position: relative, but then of course it does
not stick. I also tried attaching it to the container ( div.container
{ margin-left: 200px; } ) but then the formatting of the container is
ruined and it is not centred anymore.
So my main bottleneck is inserting my_menu just to the left of the
main container, and on a lower resolution screen it should still show,
while the main container will be on the right and have a horizontal
scrollbar.
Any help is deeply appreciated!
Thanks
