title: 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?
body: <p>I am using <a href="https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29" rel="nofollow noreferrer">Bootstrap</a> 3.0 and implemented the navigation menu. My media query break point for Desktop to Mobile view is at 800&nbsp;pixels. So basically on a screen with 800&nbsp;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&nbsp;pixels. Here in this smaller screen my menu comes in two lines. I can't reduce my main menu count.</p>
  
  <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/MsNMP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MsNMP.png" alt="Enter image description here"></a></p>
  
  <p>I need to implement something like this.</p>
  
  <p>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:</p>
  
  <p>Fiddle link: <a href="http://jsfiddle.net/vijayP/k63t7tqo/" rel="nofollow noreferrer">link</a>
      <code>fiddle image</code></p>
  
  <p><a href="http://jsfiddle.net/vijayP/k63t7tqo" rel="nofollow noreferrer">http://jsfiddle.net/vijayP/k63t7tqo</a></p>
  
  <p><a href="https://i.stack.imgur.com/Q385i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q385i.png" alt="Enter image description here"></a></p>