Header nav Theming

mail@pastecode.io avatar
unknown
plain_text
25 days ago
2.2 kB
1
Indexable
Never
/*START - change header nav color*/
nav#global-navbar{
        .header{
            margin-top: 20px;
            @media only screen and (max-width:768px){
                margin-top: 0;
            }
        }
        .navigation{
                ul > li:nth-child(3) .sub-nav .sub-nav__item{
                    min-width:180px;
                }
            }
    li.navigation__item a.navigation__link{
            color:#fff;
            & span:after{
                background-color: #fff;
            }
        }
    .header .navigation .sub-nav ul {
        background-color: transparent;
        li{
            background-color: #fff;
            &:hover{
                background-color: #7C7A61;
                color: #fff;
            }
        }
        
        a{
            color: #000;
            &:hover{
                color: #fff;
            }
            & span:after{
                background-color: transparent;
            }
        } 
    }
    &.scroll{
        padding-bottom: 20px;
            @media only screen and (max-width:768px){
                      padding-bottom: 10px;
            }
        background-color: #fff!important;
        li.navigation__item a.navigation__link{
            color:#000;
            & span:after{
                background-color: #7C7A61!important;
            }
        }
        button.hamburger-component.hamburger{
            color: #7C7A61;
        }
        .logo img{
            filter: none;
      }

    }
     .header .logo img{
         
        max-height: 120px;
        max-width: 250px;
        @media only screen and (max-width: 768px){
         max-height: 80px;
        max-width: 200px;
        }
            
     }
 
}
/*END - Change Header nav color*/
nav#global-navbar.scroll {

    .logo__img.light {
        display: none;
        @media only screen and (min-width:320px) and (max-width:1024px){
            display: none!important;
        }
    }
    .logo__img.dark {
        display: block;
       @media only screen and (min-width:320px) and (max-width:1024px){
            display: block!important;
        }
    }
}
/*end*/
Leave a Comment