/* Top Bar
=================================*/
.top-bar{
.header-nav-right-info,
li{
display: inline-block;
padding: 6px 33px;
margin-right: 0px;
color: #101010;
font-size: 14px;
i{
font-size: 20px;
color: #222222;
margin:0px 10px;
}
}
.unstyled{
display: inline-block;
margin-bottom: 0;
li{
padding: 0px;
i{
font-size: 14px;
color: #101010;
}
&:last-child{
margin-right: 0px;
}
}
}
.header-nav-right-info{
margin: 0;
}
}
ul.nav-right,
ul.nav-right li{
list-style: none;
}
ul.nav-right{
margin: 0;
}
/* Logo
=================================*/
.main-logo{
background: #ffb923;
padding: 42px 0px;
text-align: center;
}
/* Nav
=================================*/
.nav-search-button {
width: 75px;
height: 60px;
font-size: 22px;
line-height: 60px;
text-align: center;
cursor: pointer;
color: #fff;
background-color: #222222;
}
.navbar {
padding: 0px;
.nav-right{
.nav-search-btn{
position: relative;
.xs-modal-popup{
padding: 0 25px;
}
}
}
}
.navbar-brand {
padding: 0;
}
ul.navbar-nav {
li {
.dropdown-menu {
padding: 10px 20px;
min-width: 230px;
margin: 0;
border-radius: 0;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
border: none;
background-color: #1c1e22;
li {
a {
font-size: 13px;
display: block;
color: #fff;
text-transform: uppercase;
padding: 12px 0;
border-top: 1px solid #3e3e3e;
font-weight: 600;
&:hover {
color: $color-primary;
}
&:active{
opacity: 1;
visibility: visible;
}
i{
float: right;
margin-top: 5px;
}
}
&:last-child {
a {
border-bottom: none;
}
}
&:first-child {
a {
border-top: none;
}
}
ul.dropdown-menu{
left:100%;
top: 0;
li{
a{
border-top: 1px solid #3e3e3e;
}
&:first-child {
a {
border-top: none;
}
}
}
}//2nd level
}
}
}
}
.dropdown-menu.show{
display: none;
}
.navbar-brand {
padding: 0;
img {
vertical-align: top;
}
}
.nav-border {
border-bottom: 1px solid #363d8a;
padding: 10px 0;
.navbar {
padding: 0px 0;
}
}
@media (min-width: 991px) {
.navbar-container ul.navbar-nav {
li {
&:hover {
>.dropdown-menu {
display: block;
border: none;
}
}
}
}
}
.site-navigation {
.nav-search {
top: 0;
z-index: 2;
width: 70px;
height: 70px;
line-height: 70px;
right: 15px;
background: rgba(0, 0, 0, .2);
}
.search-block {
.search-close {
top: -70px;
z-index: 2;
width: 70px;
height: 70px;
line-height: 55px;
right: 0;
background: #1f1f1f;
}
}
}
.nav-search {
cursor: pointer;
span{
i{
&.icon{
color: #fff;
font-size: 20px;
line-height: 64px;
margin-right: 35px;
}
}
}
}
.search-block {
position: absolute;
right: 180px;
bottom: -50px;
background: #222;
z-index: 9;
.search-close {
color: #fff;
position: absolute;
top: -45px;
right: -18px;
background: #222;
opacity: 1;
width: 45px;
margin-right: 10px;
height: 45px;
font-size: 44px;
line-height: 30px;
cursor: pointer;
}
.form-control {
width: Auto;
height: 40px;
padding: 25px 67px;
font-style: italic;
}
}
// nav search
.modal-searchPanel {
.xs-search-group {
position: relative;
input:not([type="submit"]) {
height: 70px;
background-color: transparent;
border-radius: 50px;
border: 2px solid #fff;
color: #fff;
padding: 0 30px;
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #fff;
}
&::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}
&:-ms-input-placeholder { /* IE 10+ */
color: #fff;
}
&:-moz-placeholder { /* Firefox 18- */
color: #fff;
}
}
.search-button {
background-color: transparent;
border: 0px;
padding: 0;
color: #fff;
position: absolute;
right: 0;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
height: 100%;
width: 70px;
border-radius: 0 50px 50px 0;
}
}
}
/* Nav Button
=================================*/
.nav-button {
margin: 0px;
padding: 29px;
cursor: pointer;
color: #fff;
text-align: center;
float: right;
text-decoration: none;
border-radius: 0px;
background-color: #ffb923;
-webkit-transition: opacity .3s;
transition: opacity .3s;
a{
color: #101010;
font-weight: 700;
text-transform: uppercase;
}
}
.nav-button, .nav-text {
display: inline-block;
font-size: 13px;
}
/* Nav classic
=================================*/
.ts-top-bar{
background: #000;
.top-bar .unstyled li {
padding: 10px 0px;
}
.top-bar{
.header-nav-right-info{
padding: 6px 0px;
li{
padding-left: 0px;
padding-right: 30px;
color: #fff;
i{
color: #fff;
&.fa{
color: #ffb923;
}
}
a{
color: #fff;
}
}
}
.unstyled{
li{
a{
.social-icon{
i{
color: #fff;
}
}
}
}
}
}
}
.nav-classic{
.main-logo{
position: absolute;
z-index: 2;
padding: 34px 10px;
a{
&:before{
content: '';
position: absolute;
top: 0;
height: 100%;
left: -650px;
width: 650px;
background: #ffb923;
}
&:after{
content: '';
position: absolute;
left: 100%;
z-index: 999;
border-top: 110px solid #ffb923;
border-left: 0px solid transparent;
border-right: 100px solid transparent;
bottom: 0;
}
}
}
.navbar-right{
.nav-button{
margin-top: 20px;
padding: 12px 28px;
}
.nav-search{
background: #fff;
span {
i{
&.icon{
line-height: 90px;
}
}
}
}
.search-block{
bottom: -56px;
.search-close{
color: #000;
background: #fff;
top: -60px;
}
}
}
}
// =========================================
// navbar main menu css
// =========================================
.navbar-container{
.navbar-light{
.navbar-nav{
>li{
>a{
color: #101010;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
padding: 0 18px;
line-height: 78px;
position: relative;
i{
margin-left: 3px;
}
&:focus{
color:#ffb923;
}
&:before{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #ffb923;
content: '';
opacity: 0;
transition: 300ms ease-in-out;
transform: scale(0);
}
}
&.active,
&:hover{
> a{
color:#ffb923;
&:before{
opacity: 1;
transform: scale(1);
}
}
}
}
}
}
.dropdown-item.active{
background: inherit;
}
}
.dropdown-toggle::after{
display: none;;
}
// header transparent
.header-transparent,
.header-box{
.navbar-container{
.navbar-nav{
>li{
>a{
color: #fff;
}
}
}
.nav-search-btn{
a{
&.xs-modal-popup{
color: #fff;
}
}
}
}
}
// nav box
.header-box{
.navbar{
background: #222222;
}
.navbar-container .navbar-light .navbar-nav > li > a{
line-height: 63px;
}
.nav-button{
padding: 21px 28px;
}
}
// nav classic
.nav-classic,
.header-solid{
.navbar-collapse{
justify-content: end;
.navbar-nav{
margin-left: auto;
}
}
.navbar-container .navbar-light .navbar-nav > li > a{
font-size: 13px;
padding-left: 6px;
}
.nav-search-btn .xs-modal-popup{
color: #232323;
}
.nav-button {
padding: 8px 20px;
}
}
.nav-standard.ts-nav-classic{
.navbar-container .navbar-light .navbar-nav > li > a{
padding: 0 13px;
font-size: 13px;
}
}
@media (min-width: 992px){
.header-transparent.header-classic{
.ts-nav-classic{
.navbar-container .navbar-nav > li > a,
.navbar-container .nav-search-btn a.xs-modal-popup{
color: #232323;
}
.navbar{
background: #fff;
}
}
}
}
// =========================================
// navbar main menu css end
// =========================================
// topbar
.topbar{
padding: 35px 0;
padding-bottom: 30px;
.header-nav-right-info{
padding: 0;
margin: 0;
li{
padding: 0 0 0 35px;
position: relative;
i{
position: absolute;
left: 0;
top: 3px;
color: rgba(255,255,255,.8);
margin: 0;
}
span{
position: relative;
display: block;
font-weight: 700;
margin-bottom: 0;
line-height: 18px;
color: #fff;
text-transform: capitalize;
font-size: 15px;
&:after{
position: absolute;
content: '';
right: -20px;
width: 1px;
top: 8px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
}
//
}
margin-left: 35px;
color: rgba(255,255,255,.6);
a{
color: rgba(255,255,255,.6);
}
&:first-child{
margin-left: 0;
}
&:last-child{
span{
&:after{
background: none;
}
}
}
}
}
}
// header transparent
.header-transparent{
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 99;
.navbar{
background: rgba(0,0,0, .50);
}
.nav-search{
&.hide {
display: none;
}
}
.search-block {
right: 0px;
.search-close{
right: 0px;
background: transparent;
}
}
.navbar-nav{
padding-left: 10px;
}
}
.ts-nav-classic .nav-search-btn {
background: none;
border: none;
}
.ts-nav-classic{
position: relative;
z-index: 99;
.header-nav-right-info{
li{
color: #fff;
a{
color: #fff;
}
i{
color: $color-primary;
}
}
}
.top-bar{
.unstyled{
li {
a {
.social-icon {
i{
color: #fff;
}
}
}
}
}
}
.nav-search-btn{
background: none;
border: none;
}
}
.header-box{
.topbar {
padding: 30px 0px;
.header-nav-right-info {
li {
color: rgba(0, 0, 0, .6);
span{
color: #000;
&::after{
background: rgba(226,226,226,.6)
}
}
i{
color: rgba(0, 0, 0, .6);
}
a{
color: rgba(0, 0, 0, .6);
}
&:last-child{
span{
&:after{
display: none;
}
}
}
}
}
}
}