Currently working on an app utilizing Bootstrap v3.3.5. I have set up a navigation bar and now looking to implement two different views.
The first view is intended for tablets and computers, featuring icons alongside the menu item names without any dropdown functionality.
The second view caters to phones with icons and a dropdown-menu-right feature. How can I create a responsive sidebar that adapts to these requirements?
Any assistance would be greatly appreciated.
Check out the Bootstrap .nav-stacked image here
<!DOCTYPE HTML>
<html>
<script src="js/bootstrap.js"></script>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<ul class="nav nav-pills nav-stacked" id="pills-first">
<li><a href="#"><span class="glyphicon glyphicon-glass"></span> Glas</a></li>
<li><a href="#" data-target="#submenu1"><span class="glyphicon glyphicon-music"></span> Music</a></li>
<ul id="submenu1">
<li><a href="#"><span class="glyphicon glyphicon-volume-off"></span> Volume off</a></li>
<li><a href="#"><span class="glyphicon glyphicon-volume-down"></span> Volume down</a></li>
<li><a href="#"><span class="glyphicon glyphicon-volume-up"></span> Volume up</a></li>
</ul>
<li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a></li>
</ul>
</div>
</body>
</html>