header.header{ position: sticky; width:100%; top:0; background-color: #fff; z-index: 150; .navbar { position: relative; width:100%; padding: 0; background-color: #fff; box-shadow: 0px 0px 10px rgba($color: #000, $alpha: .3); transition: all .3s; .navbar-brand{ text-align: center; padding: 10px 0; .logo{ width:140px; img{ width: 100%; } } p{ padding-top: 5px; color: #888; font-size: 14px; text-align: right; } } .navbar-toggler{ font-size: 24px; } .navbar-nav{ font-weight: bold; .nav-item{ &+.nav-item{ margin-left: 1px; } &:hover,&:focus{ .nav-link{ padding: 23px 10px 33px; color:#fff; background-color: map-get($cisColor, master); } >.dropdown-menu { display: block; } } .nav-link{ padding: 28px 10px; color: map-get($cisColor, second); transition: all .3s; cursor: pointer; } .dropdown-menu{ border:none; padding: 10px; border-radius: 0 0 5px 5px; background-color: rgba($color: map-get($cisColor, second), $alpha: .8); transition: all .3s; .dropdown-item{ color: #fff; opacity: .8; border-bottom: 1px transparent solid; background-color: transparent; transition: all .3s; &:hover{ opacity: 1; border-bottom: 1px map-get($cisColor, master) solid; >.dropdown-menu { display: block; } } } .dropdown-menu{ // position: relative; top: 8px; left:calc(100% + 9px); border-radius: 0 5px 5px 5px; border-left: 3px map-get($cisColor, master) solid; background-color: rgba($color: map-get($cisColor, second), $alpha: .9); } } } } .landBtnGroup{ position: relative; border-radius: 5px; margin-left: 20px; overflow: hidden; .chBtn,.cnBtn,.enBtn{ font-size: 14px; font-weight: bold; padding: 0px 5px; color: #ddd; background-color: map-get($cisColor, second); transition: all .3s; &:hover,&.active{ color: #fff; background-color: map-get($cisColor, master); } } } } } @media (max-width: 992px) { header.header{ .navbar { .navbar-nav{ .nav-item{ .nav-link{ padding: 28px 10px; &:hover,&:focus{ padding: 23px 10px 33px; } } } } } } } @media (max-width: 768px) { header.header{ .navbar { .navbar-brand{ .logo{ width:110px; } } .navbar-toggler{ font-size: 20px; } .navbar-nav{ .nav-item{ .nav-link{ text-align: center; padding: 5px 0px !important; } .dropdown-menu .dropdown-menu{ margin-top: 0; border-radius: 0 5px 5px 0; } } } .landBtnGroup{ margin-left: initial; display: flex; justify-content: center; padding: 0 25%; margin-top: 20px; margin-bottom: 20px; } } } } @media (max-width: 480px) { }