WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
menu de navegação
1065
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
25 August 2025
Modelo HTML para site de filme
17 May 2025
social moderno
29 August 2025
Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas
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) */
