<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 ----------> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <div class="container"> <nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" routerLink="/dashboard" (click)="navStatus(1,1)"> <img src="https://www.google.com.mx/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwikxebch6PnAhXvtlkKHaLcD7AQjRx6BAgBEAQ&url=https%3A%2F%2Ficon-icons.com%2Ficon%2Favatar-business-executive-man-person-people-tie-black-hair%2F120519&psig=AOvVaw0fpfYDlFUsU-KbrRdN_HGU&ust=1580189708789101" width="60"> </a> <div class="topnav"> <!-- <a routerLink="/dashboard">Dashboard</a> --> <!-- <a [ngClass]="navStatusId==='1' ? 'name1' : ''" routerLinkActive="name1" routerLink="/dashboard" (click)="navStatus(1,1)">Dashboard</a> --> <a routerLinkActive="chage-navitem" routerLink="/dashboard">1</a> <a routerLinkActive="chage-navitem" routerLink="/companies" >2</a> <a routerLinkActive="chage-navitem" routerLink="/users" > 3</a> <!-- <a class="logout" (click)="logout()"> Cerrar sesión  <i class="fas fa-power-off"></i></a> --> <li class="logout"> <a class="nav-link dropdown-toggle" style="list-style: none" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bienvenido, {{nameUser}} </a> <div class="dropdown-menu my-2 my-lg-0" aria-labelledby="navbarDropdownMenuLink" > <!-- <a class="dropdown-item" href="#">Cerrar</a> --> <a class="dropdown-item close" (click)="logout()"> Cerrar sesión  <i class="fas fa-power-off"></i></a> </div> </li> </div> </div> </nav> </div>

.navbar { padding: 0px; } .navbar-nav { // background: #ededed; width: 100%; position: fixed; text-align: center; >li { display: inline-block; float: none; >a { padding-left: 30px; padding-right: 30px; } } } .navbar-dark { background-color: #242222; } .topnav { // background-color: #333; overflow: hidden; width: 100%; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; display: block; } /* Add a color to the active/current link */ .topnav a.active { background-color: #4CAF50; color: white; display: block; } .topnav .chage-navitem { background-color: white; color: black; } .logout { background-color: #EA3D18 !important; cursor: pointer; position: absolute; left: 84%; list-style: none; } .logout:hover { background-color: #EA3D18 !important; color: white !important; } .container { margin-right: 21% !important; } .nameUSer { background: #f07b3f; left: 73%; position: static; float: right !important } .cta-world-padding35 { background-color: #19b968; color: #fff; } .cta-world-title h3 { font-size: 30px; letter-spacing: 1px; width: 1584px; height: 7px; } .dropdown-item { .close{ color:black !important; } color: black !important; }