WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
navigation menu
1558
ledoc
Open In Editor
Publish Your Code
Recommended
29 June 2025
HTML Dropdown Menu Code Snippet
19 November 2025
Google Login & Responsive Menu HTML Code
HTML
Copy
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> </div> </div> </nav>
CSS
Copy
.navbar-collapse { position: absolute; top: 0; left: 0; right: 0; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #3e4149; } .navbar-toggler, .navbar-brand { z-index: 1; } .navbar-brand { font-size: 1.8em; } .navbar-toggler:focus { box-shadow: none; } .navbar-collapse .nav-link { font-size: 1.5em; letter-spacing: 2px; color: #fff; } .navbar-collapse .nav-link:hover, .navbar-collapse .nav-link.active { color: darkseagreen; } .nav-item:not(:last-child) { border-bottom: 1px solid gray; padding: 0.2em 4em; } @media screen and (min-width: 768px) { .nav-item:not(:last-child) { padding: 0.5em 8em; } } .navbar-collapse.show { transition: all 0.5s; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
