title: Bootstrap - Adding sliding menu with scroll Arrows on navbar
body: <p>Since i have menus more than the container width, i tried to add sliding scroll with arrows, but i couldn't achieve it. First, i couldn't make those menus appear in one row &amp; I couldn't make the menus slide left and right when click the arrows. I tried some css &amp; jquery code. that is also not working. Please help me. Thank in advance. 
  <strong>Note:</strong> Please see the fiddle in full screen to understand the issue clearly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".chevron-right").on("click", function() {
      alert("click");
      $('.nav').animate({
        left: 100
      }, 'slow');
    })
    $(".chevron-left").on("click", function() {
      alert("click");
      $('.nav').animate({
        left: 100
      }, 'slow');
    })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-angle {
    position: relative;
  }
  
  .chevron-left {
    color: #ccc;
    font-size: 25px;
    position: absolute;
    right: 15px;
    bottom: 50%;
    transform: translate(0, 50%);
    cursor: pointer;
    z-index: 9;
  }
  
  .chevron-right {
    color: #ccc;
    font-size: 25px;
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 15px;
    transform: translate(0, -50%);
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet"&gt;
  &lt;link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="https://cdn.paperindex.com/css/paperindex.css" rel="stylesheet"&gt;
  &lt;link href="https://cdn.paperindex.com/css/pi-header-n-footer.css" rel="stylesheet"&gt;
  &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
  &lt;script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
  &lt;div class="navbar-angle"&gt;
    &lt;i class="fa fa-chevron-right chevron-right" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;i class="fa fa-chevron-left chevron-left" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;nav class="navbar navbar-inverse mrgn-btm-0"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Page 1 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Page 4 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Page 5 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 6&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 7&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 8&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 9&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 10&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 11&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 12&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 13&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;bootstrapPage 14&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>