Horizontal navigation menu in Bootstrap 3.0 - How can I add a Prev-Next arrow on top of it if I have lot of main menu?

Question

I am using Bootstrap 3.0 and implemented the navigation menu. My media query break point for Desktop to Mobile view is at 800 pixels. So basically on a screen with 800 pixels and plus I want to show the desktop view. On a wider screen like a desktop I am able to show all 12 or so main menus in a single line. But if I go to an iPad then I get for example only 980 pixels. Here in this smaller screen my menu comes in two lines. I can't reduce my main menu count.

How I can make a previous - next arrow on top of the Bootstrap navigation so that the menu will always come in a single line, and I can traverse through all available menu in desktop mode?

I need to implement something like this.

I created a simple jsFiddle of the Bootstrap navigation having 12 main menus. Please expand the Result section wide enough to show the nav in desktop mode like follows:

Fiddle link: link fiddle image

http://jsfiddle.net/vijayP/k63t7tqo

Answer 1

This one should work:

$('.direction-right').click(function() {
    var margin = $('.navbar-nav').css('margin-top');
    console.log(margin);
    console.log('-' + ($('.navbar-nav').height() - 50) + 'px');
    $('.navbar-nav').css('margin-top', margin == '-' + ($('.navbar-nav').height() - 50) + 'px' ? margin : '-=50px');
});

$('.direction-left').click(function() {
    var margin = $('.navbar-nav').css('margin-top');
    $('.navbar-nav').css('margin-top', margin == '0px' ? '0px' : '+=50px');
});

$(window).resize(function() {
    if ($(window).width() < 768) {
     	$('.navbar-nav').css('margin-top', 0);  
    }
});

@media (max-width: 768px) {
    .direction-right, .direction-left {
        display: none;
    }    
}
@media (min-width: 768px) {
    .navbar {
        height: 51px;
        overflow: hidden;
    }
    .navbar-nav {
        overflow: hidden;
        width: calc(100% - 52px);
    }
    
    .direction-right, .direction-left {
        display: block;
    }
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          
        <div class="navbar-header pull-left">     
        </div>
        <div class="navbar-header pull-right">
           <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>
        </div>
          
        <div class="navbar-collapse collapse">
            <a href="#" class="direction-left pull-left navbar-brand"><</a>
            <ul class="nav navbar-nav">
            <li><a href="1.html">Menu 1</a></li>
            <li><a href="2.html">Menu 2</a></li>
            <li><a href="3.html">Menu 3</a></li>
            <li><a href="4.html">Menu 4</a></li>
            <li><a href="5.html">Menu 5</a></li>
            <li><a href="6.html">Menu 6</a></li>
            <li><a href="7.html">Menu 7</a></li>
            <li><a href="8.html">Menu 8</a></li>
            <li><a href="9.html">Menu 9</a></li>
            <li><a href="10.html">Menu 10</a></li>
            <li><a href="11.html">Menu 11</a></li>
            <li><a href="12.html">Menu 12</a></li>
          </ul>
            <a href="#" class="direction-right pull-left navbar-brand">></a>
        </div>
    </div>
  </div>

http://jsfiddle.net/k63t7tqo/3/

Or Try this one with a slider effect:

http://jsfiddle.net/k63t7tqo/7/