"New callcenter-menu"
Bootstrap 4.1.1 Snippet by foleystorm

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 ----------> <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width", initial-scale = 1, shrink-to-fit=no"> <title>Callcenter</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> <link rel="stylesheet" type="text/css" href="menu_alerj.css"> </head> <body> <!-- Header !--> <nav class="navbar navbar-expand-xl navbar-light navbar-laravel"> <a class="navbar-brand" href="#"> <img class="alolerj-logo-home" src="imagens/logo-alo-alerj-callcenter.svg"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExample06"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-search-plus"></i>Busca Avançada</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-search"></i> Pesquisar</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle text-nowrap" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-archive" aria-hidden="true"></i>cadastros</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#"><i class="fas fa-layer-group"></i>comissões</a> <a class="dropdown-item" href="#"><i class="fas fa-stamp"></i>assuntos</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-times-circle"></i>Não resolvidos</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-headphones-alt"></i>Site do alô alerj</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle text-nowrap" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#"><i class="fas fa-user"></i> BRENO TRENGROUSE LAIGNIER DE SOUZA</a> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">sair</a> </div> </li> </ul> </div> </nav> <!-- End - Header !--> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
@font-face { src: url(ProximaNovaA-Bold.ttf); font-family: 'proxima_nova_altbold'; font-weight: bold; color:white; } * { box-sizing: border-box; } body { height: 100%; color: rgb(243, 247, 249); } .navbar-laravel { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); border-top: 4px solid rgb(23,43,83); } .alolerj-logo-home { width: 150px; } .navbar-light .navbar-nav .nav-item { border-right: solid 2px #eff1f4; margin-right: 10px; padding-right: 10px; } @media screen and (max-width: 479px) { .navbar-light .navbar-nav .nav-item { /* start of phone styles */ border-right: solid 0px #eff1f4; margin-right: 0px; padding-right: 0px; border-bottom: solid 1px #eff1f4; } .navbar-light .navbar-nav .nav-item:last-child { border: none; } } .navbar-light .navbar-nav .nav-item i { margin-right: 5px; color: #8faae0; } .navbar-light .navbar-nav .nav-item:last-child { border-right: none; margin-right: 0px; } @media screen and (max-width: 479px) { .navbar-light .navbar-nav .nav-item:first-child { border-top: solid 2px #eff1f4; margin-top: 15px; padding-top: 10px; } } .navbar-light .navbar-nav .nav-item .nav-link { font-size: 16px; font-family: 'proxima_nova_altbold'; text-transform: uppercase; color: #5f86d3; } .navbar-light .navbar-nav .nav-item .nav-link:hover { color: #305BB0; } .dropdown-item { font-size: 16px; font-family: 'proxima_nova_altbold'; text-transform: uppercase; color: #5f86d3; } .dropdown-item:hover { color: #305BB0; }

Related: See More

Paper Kit 2
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: