Is there a way to implement a different navigation bar specifically for mobile devices like iPads? I'm considering using this one:
Here is the source code: JSFiddle
If anyone knows how to achieve this, please share!
<link rel="shortcut icon" type="image/png" href="images/logo.png" />
<title>ITBataljonen</title>
<!-- Bootstrap core CSS-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="pull-left"><img src="http://itbataljonen.com/images/logoinverse.png" class="img-responsive"></a>
<!-- <a class="navbar-brand" href="index.html">ITBataljonen</a> -->
</div>
<!-- Fixed navbar END -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">NYHETER<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">SISTE</a></li>
<li><a href="#">APPLE</a></li>
<li><a href="#">GOOGLE</a></li>
<li><a href="#">MICROSOFT</a></li>
</ul>
</li>
<li><a href="index.html">FORUM</a></li>
<li><a href="index.html">ANMELDELSER</a></li>
<li><a href="podcast/">PODCAST</a></li>
<li><a href="livestream/">LIVESTREAM</a></li>
<li><a href="shop/">SHOP</a></li>
<li><a href="#">SPILLBATALJONEN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">MER<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="contact/">KONTAKT OSS</a></li>
<li><a href="writeus/">SKRIV FOR OSS</a></li>
<li><a href="tips/">TIPS OSS</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-6">
<img src="images/uploaded/2015/03/windows10.png" class="img-responsive" alt="Responsive image">
Microsoft offers free 200GB storage with Office download.
</div>
<div class="col-xs-6">
<img src="images/uploaded/2015/03/google.jpg" class="img-responsive" alt="Responsive image">
Google faces legal action, find out more about it here.
</div>
</div>
</div>
</div>
</div> <!-- /container -->
<!--/ MAIN CONTENT -->