Skip to content

Instantly share code, notes, and snippets.

@vosidiy
Last active August 17, 2021 14:46
Show Gist options
  • Save vosidiy/88fe3a3b64ff7fbcf2362d6ad77f4f9d to your computer and use it in GitHub Desktop.
Save vosidiy/88fe3a3b64ff7fbcf2362d6ad77f4f9d to your computer and use it in GitHub Desktop.
BS5 Basic hover
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Hover me </a>
<ul class="dropdown-menu">
<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>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .nav-link{ }
.navbar .nav-item:hover .dropdown-menu{ display: block; }
.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
/* ============ desktop view .end// ============ */
@jamintowebdev
Copy link

Wonderful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment