Bootstrap horizontal to vertical navigation

Question

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>

it will be a combination of cs and javascript. And is very complex. I think you need to post a working jsfiddle of your code so people can modify it. They wont do it all for you. — M H
Hanoncs, I did more researching and you weren't lying when you mentioned it being complex! I found a semi-close example on CodePen link and noticed that in order to get the functionality that I was attempting, I need to incorporate js, css & flexbox. This gives me a slight ray of hope. Thanks! — BootstrapBiLL
Cool man glad you're getting close. Flexbox is a godsend, but remember, Old browsers have zero support of it and even with recent browsers you will need to use all the different prefixed versions of flexbox. This is a great article from csstricks. css-tricks.com/using-flexbox After looking at that codepen demo, are you sure you want to spend your time on this? Maybe you could just get a nice site setup and when you have more experience you could do this. — M H

luckyape luckyape · Accepted Answer · 2015-06-09T00:05:43

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.

Bootstrap horizontal to vertical navigation

1 Answers