zezung27
commented
1 year ago
.nav-fixed { background-color: #fff; transition: all 0.5s; z-index: 1000; padding: 20px 0; position: fixed; top: 0; left: 0; .left-nav { text-align: center; margin-top: auto; margin-bottom: auto; } .right-nav { ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; li { position: relative; white-space: nowrap; padding: 10px 0 10px 24px; .navLink { text-decoration: none; position: relative; font-size: 17px; font-weight: 600; color: #3e3e3e; &:hover { color: #4696f4; } &:hover:after { visibility: visible; transform: scaleX(1); } &:before { content: ""; } &:after { content: ""; position: absolute; bottom: -6px; left: 0px; width: 100%; height: 2px; background-color: #4696f4; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; } } .navLink.active { color: #4696f4; &:after { visibility: visible; transform: scaleX(1); } } } } } .search-nav { width: 100%; display: flex; justify-content: end; align-items: center; .form-search { padding: 10px 20px; border-radius: 30px; border: solid 1px #a5a4a4; margin-right: 10px; display: flex; justify-content: center; align-items: center; .input-cus { width: 250px; border: 0px; &:focus { outline: none; } } .icon-search { margin-left: 10px; font-size: 20px; } } .btn-sidebar { display: none; font-size: 20px; margin-right: 10px; } }}input.input-cus::placeholder { color: #000; font-weight: 500; margin-left: 10px;}
--