Bootstrap dropdown-menu absolute positioning
css, html, twitter-bootstrap
Solution
The problem is that all the element before that dropdown are positioned `relative` which makes absolute position of width to 100% of body width difficult (read more). If you aren't looking for a JavaScript solution than with some changes to the mark-up and CSS(removing container class from `li.inline-list` , removing `col-sm-3`, changing `col-sm-9` to 'col-sm-12', postioning nav link in center and using `container-fluid` instead of `container` to wrap them) I came up with this Bootply .Observe the CSS I have added
.top-main .dropdown-menu {
width: calc(100% + 60px);
position: absolute;
left: -30px;
}
Even though I could get the sub-menu to almost full length, `container-fluid` and `col-x-x` both leave 15px padding on both sides, so I had to give -30px position to left and add 60px to width using `calc` . Calc is supported by IE9+ only.
Problem
I made vertical dropdown menu in bootstrap. Everything works just fine except one thing. The whole submenu is positioned using `fixed` attribute, and when there is some more content of page, the whole submenu is scrolling with page. Here you have example: Bootply Is it possible to fix it?