CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
Jeremy Thomas
Jeremy Thomas

Reputation: 6684

Bootstrap: Collapse navbar - no options

I am attempting to add collapsible navbar functionality after I've already created my navbar (containing multiple dropdowns) and I cannot seem to get it to work. I think it might be because I have too many nested divs and its not sure what to show?

Here is a fiddle that sorta represents the actual behavior (there is some jQuery I have not included):

.html

<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="collapsible-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
     </button>
    </div>

      <div class="row collapse navbar-collapse" id="collapsible-navbar">
        <div class="col-sm-2 text-center">
          <ul class="nav navbar-nav navbar-left collapse navbar-collapse" id="collapsible-navbar">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Testimonials</a></li>
            <ul class="dropdown-nav row clients">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a></li>
            </ul>
          </ul>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-left">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a></li>
            <ul class="dropdown-nav row locations">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a></li>
            </ul>
          </ul>
        </div>
        <div class="col-sm-4 text-center">
            <img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt=""/>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a></li>
                <ul class="dropdown-nav row information">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">The Program</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">The Food</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">SMT</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Vibratrim</a></li>
                </ul>
          </ul>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a></li>
                <ul class="dropdown-nav row sign_in">
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a></li>
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a></li>
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a></li>
                </ul>
          </ul>
        </div>
      </div>
</div>
</nav>

It seems as though when I click the "sandwich" icon, it is not toggling, the display: none property of collapse

Upvotes: 0

Views: 679

Answers (1)

jelums
jelums

Reputation: 328

The first thing that I notice is that you are not correctly targeting the navbar in the button element.

It should be data-target="#collapsible-navbar" and you should also add aria-expanded="false" to the button element.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-navbar aria-expanded="false"">

Upvotes: 1

Related Questions