From GandalfLife, 7 Months ago, written in HTML5.
Embed
  1. .opskinsBtnImg {
  2.         height: 24px;
  3.         margin-right: 6px;
  4. }
  5. .topnavbar-button{
  6.         padding-top: 7px;
  7. }
  8.  
  9.   #navbartop .nav-item{
  10.         width: 200px;
  11.     text-align: center;
  12.   }
  13. #navbartop .nav-item::after{content:'';display:block;width:0px;height:2px;background:#39bda7;transition: 0.2s;}
  14. #navbartop .nav-item:hover::after{width:100%;}
  15. .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{color:#39bda7;}
  16. #navbartop .nav-link{padding:15px 5px;transition:0.2s;}
  17. #navbartop .dropdown-item.active, .dropdown-item:active{color:#212529;}
  18. #navbartop .dropdown-item:focus, .dropdown-item:hover{background:#39bda7;}
  19. #navbartop .nav-link{
  20.   color:#FFF;
  21. }
  22. #navbartop .nav-item.active::after{
  23.   width:100%;
  24. }
  25.  
  26. <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbartop">
  27.   <a class="navbar-brand" routerLink=""><img src="https://thegamingblackmarket.com/assets/img/logo.png"/></a>
  28.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  29.     <span class="navbar-toggler-icon"></span>
  30.   </button>
  31.  
  32.   <div class="collapse navbar-collapse" id="navbarSupportedContent">
  33.     <ul class="navbar-nav mr-auto">
  34.      
  35.     </ul>
  36.     <ul class="navbar-nav">
  37.         <li class="nav-item topnavbar-button">
  38.                         <a class="nav-link" href="https://thegamingblackmarket.com"><i class="fas fa-skull"></i> The Black Market</a>
  39.                 </li>  
  40.         <li class="nav-item topnavbar-button">
  41.                         <a class="nav-link" routerLink=""><i class="fas fa-balance-scale"></i> Trade</a>
  42.                 </li>          
  43.                 <li class="nav-item topnavbar-button" *ngIf="User.isLoggedIn()">
  44.                         <a class="nav-link" href="/logout"><i class="fas fa-sign-out-alt"></i> Logout</a>
  45.                 </li>
  46.                 <li class="nav-item steamNavContain" *ngIf="!User.isLoggedIn()">
  47.                         <a class="nav-link opskinsNavBtn" href="/auth/opskins">
  48.                         <button type="button" class="btn accentBtn opskinsBtn"><img class="opskinsBtnImg float-left" src="/assets/img/opskinsLogo.svg"> <span class="opskinsBtnText">OPSkins Sign-In</span></button></a>
  49.                 </li>
  50.     </ul>
  51.   </div>
  52. </nav>