Twitter Bootstraps Yamm3 dropdown floated right... strange?

Question

I'm using Yamm3 mega menu for Bootstrap. I have a class of navbar-right on the nav ul. When the Bootstraps default dropdown is open however the dropdown is floated all the way to the right of the container. How can I align the dropdown menus under their corresponding dropdown-toggles?

HTML

    <nav class="navbar yamm navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="site-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            Default DropDown
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="dropdown yamm-fw">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
            Yamm3 DropDown
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <div class="yamm-content">
                <div class="row">
                  <div class="col-sm-3">.col-sm-3</div>
                  <div class="col-sm-3">.col-sm-3</div>
                  <div class="col-sm-3">.col-sm-3</div>
                  <div class="col-sm-3">.col-sm-3</div>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            Default DropDown
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="dropdown yamm-fw">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
            Yamm3 DropDown
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <div class="yamm-content">
                <div class="row">
                  <div class="col-sm-3">.col-sm-3</div>
                  <div class="col-sm-3">.col-sm-3</div>
                  <div class="col-sm-3">.col-sm-3</div>
                  <div class="col-sm-3">.col-sm-3</div>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

YAMM3 CSS

.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}

Here's a js fiddle of the nav...

js fiddle : link

Answer 1

The .dropdown-menu-right rule in dropdowns.less is causing the issue.

.dropdown-menu-right {
  left: auto; // Reset the default from `.dropdown-menu`
  right: 0;
}

It is much easier and more convenient to simply add a float:right; in a new class on your menu as opposed to changing the whole structure e.g

 <div class="site-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav pull-right">

This will keep all the floats inplace and you therefore only need to add a right:0; to the navigation drop down which sits against the right side of the page to get he desired effect.

see js fiddle