Bootstrap 3 - Constrain Dropdown Width

by Dhanck

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<div class="container">
  <div class="navbar navbar-inverse">

    <!-- Header -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
                Bootstrap 3 Skeleton
            </a>
    </div>
    <!-- Navbar Links -->
    <ul class="nav navbar-nav navbar-right">
      <li class="first expanded dropdown menu-4929 active"><a href="/" title="" data-target="#" class="dropdown-toggle menu-4929 active" data-toggle="dropdown">About Us</a>
        <ul class="dropdown-menu dropdown-menu-left">
          <li class="first leaf menu-4936 active"><a href="/" title="" class="menu-4936 active">The Museum</a></li>
          <li class="leaf menu-4937 active"><a href="/" title="" class="menu-4937 active">The Design</a></li>
          <li class="leaf menu-4938 active"><a href="/" title="" class="menu-4938 active">Our Team</a></li>
          <li class="last leaf menu-4939 active"><a href="/" title="" class="menu-4939 active">Work Opportunities</a></li>
        </ul>
      </li>
      <li class="expanded dropdown menu-4930"><a href="/the-collection" title="" data-target="#" class="dropdown-toggle menu-4930" data-toggle="dropdown">Collection</a>
        <ul class="dropdown-menu dropdown-menu-left">
          <li class="first leaf menu-4943 active"><a href="/" title="" class="menu-4943 active">Steam Launches</a></li>
          <li class="leaf menu-4942 active"><a href="/" title="" class="menu-4942 active">Sailing Boats</a></li>
          <li class="leaf menu-4941 active"><a href="/" title="" class="menu-4941 active">Motorboats</a></li>
          <li class="leaf menu-4940...

CSS

ul.dropdown-menu {
  position: relative;
  overflow-x: auto;
  width: 100%;
  height: auto;
  margin: 0;
  border: none;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

JavaScript

$('.expanded').click(function(event) {
event.preventDefault();
$('.dropdown-menu-left').css('position', 'absolute');
console.log('position absolute');
setTimeout(function(){
console.log('menu clicked');
//Get the height of the UL nested and add the size of nav + the bottom margin
var navheight = $('.open .dropdown-menu-left').height() + 52 + 20;
console.log(navheight);

$('.navbar').height(navheight);
console.log('set height');

}, 0)
});