"Enterprise Navbar"
Bootstrap 4.1.1 Snippet by LeandroBizzinotto

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body class="w3-light-grey w3-animate-opacity"> <nav class="navbar navbar-expand-lg navbar-light colorauto"> <li class="logoresp1"> <a href="#" class="logoresponsive"> <img src="../logos/Sem título.png" width="160" height="mr-auto" alt=""> </a> </li> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação"> <span class="navbar-toggler-icon"></span> </button> <div class=" collapse navbar-collapse " id="conteudoNavbarSuportado"> <ul class="navbar-nav mr-auto" style="font-family: 'Montserrat', sans-serif;"> <li class="nav-item active" style="margin-right: 10px;"> <a class="nav-link fontbranco" title="Inicio" href="#">Home <span class="sr-only">(página atual)</span></a> </li> <li class="nav-item" style="margin-right: 10px;"> <a class="nav-link fontbranco" title="Quem somos" href="#">About</a> </li> <li class="nav-item" style="margin-right: 5px;"> <a class="nav-link fontbranco" title="Fale Conosco" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link fontbranco" title="Nossos Serviços" href="#">Talk to us</a> </li> <li class="nav-item"> <a class="nav-link fontbranco" title="Nossos Serviços" href="#">Who we are</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle fontbranco" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Modal </a> <div class="dropdown-menu colorauto" aria-labelledby="navbarDropdown"> <a class="dropdown-item fontbranco" data-toggle="modal" data-target="#modalExemplo">Login</a> <a class="dropdown-item fontbranco" href="#">Nossos Clientes</a> <a class="dropdown-item fontbranco" href="#">Nossos Projetos</a> <div class="dropdown-divider"></div> <a class="dropdown-item fontbranco" href="#">Contato</a> </div> </li> </ul> </div> </nav> <!-- Modal --> <div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="col-md-12 min-vh-100 d-flex flex-column justify-content-center"> <div class="row"> <div class="col-lg-6 col-md-8 mx-auto"> <!-- form card login --> <div class="card rounded shadow" style="width: 500px"> <div class="card-header"> <h3 class="mb-0" style="text-align: center">Login</h3> </div> <div class="card-body"> <form class="form" role="form" autocomplete="off" id="formLogin" novalidate="" method="POST"> <div class="form-group"> <label for="uname1">Username</label> <input type="text" class="form-control form-control-lg rounded-0" name="uname1" id="uname1" required=""> <div class="invalid-feedback">Oops, you missed this one.</div> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control form-control-lg rounded-0" id="pwd1" required="" autocomplete="new-password"> <div class="invalid-feedback">Enter your password too!</div> </div> <div> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description small text-dark">Remember me on this computer</span> </label> </div> <button type="submit" class="btn btn-success btn-lg float-right" id="btnLogin">Login</button> </form> </div> <!--/card-block--> </div> <!-- /form card login --> </div> </div> <!--/row--> </div> </div> </div> <div class="container-fluid center"> <p>I HAVE A MODAL TOO !</p> <p id="p2">CLICK ON THE MENU</p> </div> </body>
body { padding: 0; margin: 0; } .colorauto { background-color: rgba(12, 60, 96, 1)!important; } .fontbranco { color: white!important; letter-spacing: 2px; } .nav-item:hover { font-weight: bold!important; } .dropdown-menu { background-color: rgba(12, 60, 96, .9)!important; font-weight: bold!important; } .dropdown-item:hover { background-color: rgba(12, 60, 96, 1)!important; font-weight: bold; } .logoresp1 { display: none; text-align: right; list-style-type: none; } /* teste */ .nav-item::before { content: ''; display: block; width: 100%; height: 1px; background: #fff; transition: 0.3s; transform: translateX(0); transform: scaleX(0) } .nav-item::after { content: ''; display: block; width: 100%; height: 1px; background: #fff; transition: 0.3s; transform: translateX(0); transform: scaleX(0) } .nav-item:hover::after { width: 100%; transform: scaleX(1); opacity: 1 } .nav-item:hover::before { transform: scaleX(1); opacity: 1 } .nav-link { padding: 15px 5px; transition: 0.2s; } .nav-link { padding: 15px 5px; } .navbar-nav .nav-link { color: #fff; } .center{ text-align: center; } .center p{ font-size: 10em; display: INLINE-block; } .center p:hover{ display: none; } #p2{ display: none; } p:hover ~ #p2{ display: inherit; } .modal{ margin-left:-250px; } @media screen and (max-width: 1000px) { .logoresp1 { display: inherit; } .logomin { display: none; } #descimga { background-color: khaki; } .dropdown-item:hover { background-color: white!important; color: rgba(12, 60, 96, 1)!important; font-weight: bold; } .nav-item:hover::before{ width: 100px; } .nav-item:hover::after{ width: 100px; } }

Related: See More

BLK• Design System
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: