Bootstrap CSS selectively applying/not loading?

user_3784049 0
Viewed 87

I've got a navbar that I'm currently trying to add submenus to. The styling and such applies from bootstrap, but it seems like some of the actions supplied by bootstrap aren't actually applying to the header.

On bootstrap's website, they have this snippet:

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Service A</a></li>
                <li><a href="#">Service B</a></li>
                <li class="dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service C1</a></li>
                        <li><a href="#">Service C2</a></li>
                        <li><a href="#">Service C3</a></li>
                        <li><a href="#">Service C4</a></li>
                        <li><a href="#">Service C5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

I've applied this, and rather the menu looking like this:

enter image description here

It actually ends up looking like this (minus the color styling):

enter image description here

Notice how the caret is positioned and rotated differently, and the hover does not cause the submenu to pop up.

I've inspected all of my custom css and there is nothing modifying the submenu classes. This makes me thing for some reason something's going on, and I'm all out of ideas.

If I copy the css from the bootstrap example exactly, then the submenu then shows up, however I'm already loading in bootstrap, so this shouldn't be necessary... Here's how I'm loading it:

<head>
    <link rel="stylesheet" href="/assets/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="/assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/global.css?v=21">
    <link rel="stylesheet" type="text/css" href="/assets/css/header.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/footer.css">
    <link href='https://fonts.googleapis.com/css2?family=Montserrat' rel='stylesheet' type='text/css'>
</head>

The header.css and footer.css have only a few lines in them each, both not relevant to this. And like I said, I already searched through the entirety of global.css and there's nothing related to this there. Just a color attribute here and there.

Obviously the header is bootstrappy in some sense so part of the bootstrap is being applied, but this submenu stuff apparently isn't.

JsFiddle: https://jsfiddle.net/qfLt8h1j/

If anyone has any ideas, that'd be great. I'm at a loss at this point.

twitter-bootstrap css html jquery javascript
1 Answers

This is not natively supported by bootstrap 3.

You need to do something like this:

markup:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                     <li><a href="#">Menu Item</a></li>
                     <li><a href="#">Menu Item</a></li>
                     <li class="dropdown-submenu">
                         <a tabindex="-1" href="#" class="dropdown-submenu-toggle">Second Dropdown <b class="caret"></b></a>
                         <ul class="dropdown-menu">
                             <li><a href="#">Sub-Menu Item</a></li>
                             <li><a href="#">Sub-Menu Item</a></li>
                             <li><a href="#">Sub-Menu Item</a></li>
                         </ul>
                     </li>
                     <li><a href="#">Menu Item</a></li>
                     <li><a href="#">Menu Item</a></li>
                 </ul>
             </li>
         </ul>
     </div><!-- /.navbar-collapse -->
  </div><!-- /container -->
</nav>

css:

.dropdown-submenu{position: relative;}
.dropdown-submenu .caret{-webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.dropdown-submenu > .dropdown-menu {top:0; left:100%; margin-top:-6px; margin-left:-1px;}
.dropdown-submenu.open > a:after{border-left-color:#fff;}
.dropdown-submenu.open > .dropdown-menu, .dropdown-submenu.open > .dropdown-menu {display: block;}
.dropdown-submenu .dropdown-menu{margin-bottom: 8px;}
.navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color: #f6f6f6;}
.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#333;}
.navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{padding-left: 30px;}
@media screen and (min-width:992px){
    .dropdown-submenu .dropdown-menu{margin-bottom: 2px;}
    .navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{padding-left: 25px;}
    .navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#fff;}
    .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#fff;}
}

js:

// Make Dropdown Submenus possible
$('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function(e){
    $('.dropdown-submenu ul').removeAttr('style');
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});
// Clear Submenu Dropdowns on hidden event
$('#bs-navbar-collapse-1').on('hidden.bs.dropdown', function () {
    $('.navbar-nav .dropdown-submenu ul.dropdown-menu').removeAttr('style');
});

optional hover support:

$( document ).ready(function() { 

   // Make Secondary Dropdown on Hover
   $('.dropdown-submenu a.dropdown-submenu-toggle').hover(function(){
      $('.dropdown-submenu ul').removeAttr('style');
      $(this).next('ul').toggle();
   });
 
   // Make Regular Dropdowns work on Hover too
   $('.dropdown a.dropdown-toggle').hover(function(){
      $('.navbar-nav .dropdown').removeClass('open');
      $(this).parent().addClass('open');
   });
});

taken from here

Also, think of upgrading, bootstrap is already at version 5!

user_4195810
Related