.navbar { padding: 0.5rem 2rem; } nav { background-color: black; } .navbar-nav { width: 100%; } .navbar-brand { line-height: 1; margin-right: 1rem; } .navbar-brand svg { height: 37px; width: auto; vertical-align: middle; } .navbar-light .navbar-nav .nav-link { color: #444; position: relative; padding: 10px; margin: 0 10px !important; } .navbar-light .navbar-nav .active { background-color: #f1ffc5; } .navbar-light .navbar-nav .active> .nav-link { color: #ff0844; font-weight: 700; } .navbar-light .navbar-nav .dropdown.show> .nav-link { color: #ff0844; } .navbar-light .navbar-nav .nav-link::before { background-color: currentColor; bottom: -1px; content: ""; height: 1px; left: auto; right: 0; position: absolute; -webkit-transition: width 0.2s ease-in-out; -o-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; width: 0; } .navbar-light .navbar-nav .nav-social::before { content: none; } .navbar-light .navbar-nav .nav-social:hover { content: none; transition: 0.3s; transform: scale(1.2); } .navbar-light .navbar-nav .nav-link:hover { color: rgb(0, 0, 0); } .navbar-light .navbar-nav .nav-link:hover::before { left: 0; right: auto; width: 100%; } .nav-link svg { width: auto; height: 25px; vertical-align: text-top; } .dropdown-menu-others { display: none; position: relative; box-shadow: none; } .show-dropdown { display: block; } @media only screen and (min-width: 991px) { .dropdown-menu-others { position: absolute; background: white; -webkit-box-shadow: 13px 11px 48px 0px rgba(0, 0, 0, 0.55); -moz-box-shadow: 13px 11px 48px 0px rgba(0, 0, 0, 0.55); box-shadow: 13px 11px 48px 0px rgba(0, 0, 0, 0.55); transition: all 500ms ease; } } .dropdown-content { display: none; position: absolute; background-color: white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; overflow-y: scroll; height: 80vh; } .dropdown:hover .dropdown-content { display: block; } .navbar-light .navbar-nav .nav-link:hover { color: #FF0844; }