Bootstrap navbar dropdown submenu not working in collapsed mode

Question

I'm building a new website and I'm stuck with my navbar.

The problem I am facing is that the submenu (second level dropdown) is not showing up in collapsed mode. If you press it to open like the normal dropdown, it acts as if it is a link by itself instead of opening the submenu.

In full screen mode it works as expected but upon hover instead of click.

.navbar {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin: 20px 50px 20px 50px;
}

.navbar {
  background-color: #343a40;
}

.navbar .navbar-brand {
  color: #4d8de5;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #1a71e8;
}

.navbar .navbar-text {
  color: #4d8de5;
}

.navbar .navbar-text a {
  color: #1a71e8;
}

.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #1a71e8;
}

.navbar .navbar-nav .nav-link {
  color: #4d8de5;
  border-radius: .25rem;
  margin: 0 0.25em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #1a71e8;
}

.navbar .navbar-nav .dropdown-menu {
  background-color: #343a40;
  border: 2px solid #4d535a;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item {
  color: #4d8de5;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
  color: #1a71e8;
  background-color: #4d535a;
}

.navbar .navbar-nav .dropdown-menu .dropdown-divider {
  border-top-color: #4d535a;
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #1a71e8;
  background-color: transparent;
}

.navbar .navbar-toggle {
  border-color: #4d535a;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #4d535a;
}

.navbar .navbar-toggle .navbar-toggler-icon {
  color: #4d8de5;
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #4d8de5;
}

.navbar .navbar-link {
  color: #4d8de5;
}

.navbar .navbar-link:hover {
  color: #1a71e8;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #4d8de5;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #1a71e8;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #1a71e8;
    background-color: #4d535a;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #4d8de5;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #1a71e8;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #1a71e8;
    background-color: #4d535a;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #4d8de5;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #1a71e8;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #1a71e8;
    background-color: #4d535a;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #4d8de5;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #1a71e8;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #1a71e8;
    background-color: #4d535a;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #4d8de5;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #1a71e8;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #1a71e8;
  background-color: #4d535a;
}

.nav-item.active {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 2px solid #1a71e8;
}

.btn-outline-success,
.btn-outline-success:active,
.btn-outline-success:visited {
  background-color: transparent !important;
  border-color: #4d8de5;
  color: #4d8de5;
}

.btn-outline-success:hover {
  background-color: transparent !important;
  border-color: #1a71e8;
  color: #1a71e8;
}

.btn-outline-success:focus {
  box-shadow: 0 0 0 .2rem rgb(26, 113, 232)
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #1a71e8;
  background-color: transparent
}

.btn-outline-success.dropdown-toggle {
  color: #4d8de5;
  background-color: #1a71e8;
  border-color: #1a71e8
}

.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem rgb(26, 113, 232)
}

@media (min-width: 992px) {
  .dropdown-menu .dropdown-toggle:after {
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
  }
  .dropdown-menu .dropdown-menu {
    margin-left: 0;
    margin-right: 0;
  }
  .dropdown-menu li {
    position: relative;
  }
  .nav-item .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
  }
  .nav-item .submenu-left {
    right: 100%;
    left: auto;
  }
  .dropdown-menu>li:hover {
    background-color: #f1f1f1
  }
  .dropdown-menu>li:hover>.submenu {
    display: block;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="page">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom">
    <a class="navbar-brand" href="#"><img src="images/logo5.png" alt="" style="width: 175px"></a>
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="navbar-collapse collapse" id="navbarsExample09" style="">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown"> Platform </a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a class="dropdown-item" href="#"> Dropdown item 1</a></li>
            <li><a class="dropdown-item" href="#"> Dropdown item 2 </a></li>
            <li><a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 3 </a>
              <ul class="submenu submenu-right dropdown-menu" data-toggle="dropdown">
                <li><a class="dropdown-item" href="">Submenu item 1</a></li>
                <li><a class="dropdown-item" href="">Submenu item 2</a></li>
                <li><a class="dropdown-item" href="">Submenu item 3</a></li>
                <li><a class="dropdown-item" href="">Submenu item 4</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item" href="#"> Dropdown item 4 </a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Add new game</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" style="margin-right: 10px" type="submit">Search</button>
        </form>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Account
                    </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Edit: my javascript was the problem. The version that worked for me thanks to the link in the comments, was the following:


$( document ).ready( function () {
    $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
        var $el = $( this );
        var $parent = $( this ).offsetParent( ".dropdown-menu" );
        if ( !$( this ).next().hasClass( 'show' ) ) {
            $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
        }
        var $subMenu = $( this ).next( ".dropdown-menu" );
        $subMenu.toggleClass( 'show' );

        $( this ).parent( "li" ).toggleClass( 'show' );

        $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
            $( '.dropdown-menu .show' ).removeClass( "show" );
        } );

        if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
        }

        return false;
    } );
} );

score 0 · Answer 1 · answered Oct 01 '20 at 13:55

If JavaScript solutions are an option for you, I think this answer of similar question provides what you're looking for.

Here is the JavaScript snippet without modification:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });


  return false;
});

thx! that itself didn't work, but the link to the other question had a version that did work for me. seems my issue was my javascript that was not working correctly which i forgot to post because i thought it was mainly a css issue — FGOD, Oct 02 '20 at 07:50

Bootstrap navbar dropdown submenu not working in collapsed mode

1 Answers1