0

I am not an expert on css or bootstrap but after a while I manage to get a bootstrap nav menu almost finished. What I am missing is the css for the third level menu items. I think this are probably already on the bootstrap css, but maybe I have not added the class names properly.

This is the bootstrap css that I have overwritten:

/**
Bootstrap nav
**/
.navbar-default {
  background-color: #0090e5;
  border: 0 !important;  
}

.navbar-default ul {
    list-style-type: none;
}

.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li a:hover,
.navbar-default .navbar-nav > li a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > li .dropdown-menu {
  background-color: #0090e5;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li a:focus {
  color: #ffffff;
  background-color: #63b7e8;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #63b7e8;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: #63b7e8;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #63b7e8;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #63b7e8;
}
.navbar-default .navbar-toggle {
  border-color: #63b7e8;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #63b7e8;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #63b7e8;
  }
}

And this is how I made the nav bar with a javascript to add classes.

<!-- Begin Navbar -->
                <div class="col-sm-10 col-md-8 col-md-offset-1">
                  <div class="navbar navbar-default " role="navigation">
                      <div class="container-fluid">
                          <div class="navbar-header">
                              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>                            
                              <div class="collapse navbar-collapse">
                                  <jdoc:include type="modules" name="menu"/>
                              </div> <!-- /.navbar-collapse collapse -->
                          </div> <!-- /.container-fluid -->
                      </div><!-- /.navbar .navbar-inverse -->
                  </div>
                  <!-- End Navbar --> 

This comes after the tag

<script type="text/javascript">
  (function($){
        jQuery(document).ready(function(){
          $('.navbar-nav > .parent').addClass('dropdown');
          $('.navbar-nav > .parent > a').addClass('dropdown-toggle');
          $('.navbar-nav > .parent > a').attr('data-toggle', 'dropdown');
          $('.navbar-nav > .parent > a').attr('href','#');
          $('.navbar-nav > .parent > a').append('<span class="caret"></span>');
          $('.navbar-nav > .parent > ul').addClass('dropdown-menu');
        });
      })(jQuery);
</script>
0

Bootstrap 3 removed support for third level sub menus. See this stackoverflow answer for workarounds: https://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing

For Bootstrap 2 this could be interesting: https://stackoverflow.com/questions/17380517/bootstrap-3-level-collapsing-menu

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.