Skip to content

Instantly share code, notes, and snippets.

@b1nary b1nary/_README.md
Last active Jan 12, 2020

Embed
What would you like to do?
Bootstrap 4 2nd Level Menu "Hack"

Bootstrap 4 2nd Level Menu "Hack"

I was looking for some basic CSS to gain a second level for my Bootstrap 4 menu. To my surprise what i found was a lot of jQuery, a lot of pre-styled glitchy examples and not at all what i was actually looking for. Some markup was so bad i felt like puking when i tried to "fix" the bad examples.

So without further internet and subtle jQuery bashing, i'll present, a simple second level for Bootstrap 4 Menüs!

  • No CSS weirdness
  • Works with every template
  • No jQuery (or sane Javascript)
/* 2nd Level Menu Hack */
/* Manually change your breakpoint if not md */
@media screen and (min-width: 768px){
.dropdown-menu .dropdown-menu {
position: absolute;
left:97%;
top:0px;
}
}
<nav class="navbar navbar-light navbar-expand-md bg-dark">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop"
aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation" style="width:100%;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Top Level</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown_tech"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">1st Level</a>
<!-- v 2nd Level v -->
<div class="dropdown-menu" aria-labelledby="dropdown_tech">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown_tech"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">1st Level</a>
<div class="dropdown-menu" aria-labelledby="dropdown_tech">
<a class="dropdown-item" href="#">2nd Level</a>
<a class="dropdown-item" href="#">2nd Level</a>
</div>
</div>
<!-- ^ 2nd Level ^ -->
<a class="dropdown-item" href="#">Another 1st Level</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.