Bootstrap Dropdown Menu Overflows rather than adjusts

Question

I have a navbar I am creating that has a bunch of menus and submenus. The menus are trailing off the point of viewing and allowing my page to scroll which is not my desired result. I would like for it to flip from right menu to left if there is not enough room for it.

For my Fiddle I have a quick demo that fairly accurately represents my real navbar. To replicate my issue position the webpage depending on your resolution so that the navbar is forced off the side of the page. Click on the interactive tab and on the right column (ignore the styling) click stuff system and go into those submenus. They will trail off the page unviewable unless you scroll which is not what I want.

I have tried using right:0;left:auto; as well as positions for the css as I have found in other discussions but that did not help. I also have tried to use a JQuery menu that worked for the most part but didn't do everything I needed so that is not an option currently. How can I get it to be responsive and realize that it cannot overflow off the page?

UPDATE: I have created a bounty as I need an answer for this. I have modified the question slightly.

Answer 1

To do this you have to use JavaScript to make the menu dynamically change its style based on the viewport.

Luckely for all of us, there are some great guys on the web who create these things for existing frameworks. So others don't have to invent an existing wheel. Take a look at the link below. This is exaclty what you are looking for (atleast, as far as I can see in your question).

http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

It is fully compatible with bootstrap 3.

Answer 2

For a temporary fix (Not dynamic)

Use the following CSS rules

ul.dropdown-menu.dropdown-inverse {
    position: absolute;
    left:-58% 
    /* Overriding value from 100% defined in ".dropdown-submenu > .dropdown-menu"  */

    margin-right: 200px;
    margin-left: -60px;
}

For a responsive solution, basically calculate the width of each menu and add them up.

Then subtract the value from the screenwidth and then add the above class to the subject.

Fiddle Link

Answer 3

Use this css rule in the media queries (at widths that have the problem). It should sort it out to what i believe you want

.dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: -92%;
   margin-top: -6px;
   margin-right: -1px;
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px 6px;
   border-radius: 0 6px 6px 6px;
}

Fiddle