I am looking for a way to make a horizontal navigational row of drop down menu items convert to a vertically stacked nav that would act/function like an accordion upon entering a smaller breakpoint.
I don't want this menu group to be converted to the burger menu, but rather prefer it to simply stack like an accordion with collapse functionality on the smaller breakpoint (to the width of it's container).
I have searched many sites/videos and for some reason I am having a difficult time making this work (again, largely due to my lack of bootstrap knowledge).
I'm confused if this should be handled by a media query in the css, or maybe a javascript function or a combination of some sort? Also, should I set this up using a different navigation method other than Bootstrap's "pill" navigation style?
AGGGGHHH (insert brain explosion sound here)! :)
I've attached my working HTML code below. If anyone has a suggestion or can point me in the right direction of a solution I would appreciate it!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nav-Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<section class= "container" id="mast-container">
<div class="row">
<div class="col-lg-8 navbar-collapse collapse">
<ul class="nav nav-pills" id="main-nav" role="navigation">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle-main" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
ITEM 1<br><span class="glyphicon glyphicon-menu-down"></span>
</a>
<ul class="dropdown-menu main-nav" role="menu">
<li><a href="#">Dropdown Item1</a></li>
<li><a href="#">Dropdown Item2</a></li>
<li><a href="#">Dropdown Item3</a></li>
<li><a href="#">Dropdown Item4</a></li>
</ul>
</li><!--/ITEM 1 -->
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
ITEM 2<br><span class="glyphicon glyphicon-menu-down"></span>
</a>
<ul class="dropdown-menu main-nav" role="menu">
<li><a href="#">Dropdown Item1</a></li>
<li><a href="#">Dropdown Item2</a></li>
<li><a href="#">Dropdown Item3</a></li>
<li><a href="#">Dropdown Item4</a></li>
</ul>
</li><!--/ITEM 2 -->
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
ITEM 3<br><span class="glyphicon glyphicon-menu-down"></span>
</a>
<ul class="dropdown-menu main-nav" role="menu">
<li><a href="#">Dropdown Item1</a></li>
<li><a href="#">Dropdown Item2</a></li>
<li><a href="#">Dropdown Item3</a></li>
<li><a href="#">Dropdown Item4</a></li>
</ul>
</li><!--/ITEM 3 -->
<li role="presentation" class="dropdown"><!--RESEARCH main-nav -->
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
ITEM 4<br><span class="glyphicon glyphicon-menu-down"></span>
</a>
<ul class="dropdown-menu main-nav" role="menu">
<li><a href="#">Dropdown Item1</a></li>
<li><a href="#">Dropdown Item2</a></li>
<li><a href="#">Dropdown Item3</a></li>
<li><a href="#">Dropdown Item4</a></li>
</ul>
</li><!--/ITEM 4 -->
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
ITEM 5<br><span class="glyphicon glyphicon-menu-down"></span>
</a>
<ul class="dropdown-menu main-nav" role="menu">
<li><a href="#">Dropdown Item1</a></li>
<li><a href="#">Dropdown Item2</a></li>
<li><a href="#">Dropdown Item3</a></li>
<li><a href="#">Dropdown Item4</a></li>
</ul>
</li><!--/ITEM 5 -->
</ul>
</div><!--/main-nav-->
</div><!--/row-->
</section>
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
How attached are you to Bootstrap? Your preference for navigation suggests that Foundation may be a better natural choice of CSS frameworks http://foundation.zurb.com/ . Bucking a CSS frameworks prefered navigation negates the point to an extent.
Foundation approaches the vertical nav by building two sets of navigation markup, the first floats off-view beside the page content, the second set of markup is a tradition horizontal nav.
At first this approach seemed awkward to me but it frees up each element to be its own thing which can be a good trade off. Good luck.