Header - Nav

 avatar
LBautista
css
22 days ago
3.3 kB
3
Indexable
Never
/* START - header nav theme - WB Lloyd*/
nav#global-navbar{
        /* START - default state - homepage header nav*/
    .header.theme-light{
        .header__hamburger{
            circle {
                fill: #fff;
            }
            svg rect{
                fill:#7C7A61!important;
            }
        }
        ul.navigation li.navigation__item{
        color:#fff;
            .sub-nav__link {
                color: #FFF;
                background-color: #000;
            }
            .sub-nav__link:hover {
                color: #FFF;
                background-color: #7C7A61;
            }
            .navigation__link:after{
                background: #fff;
            }
        }
        .search__btn svg {
            color:#fff;
        }
        a.header__btn-contact{
            background: transparent;
            color: #fff!important;
            border-color: #fff!important;
            &:hover{
                background: #fff!important;
                color: #7C7A61!important;
                border-color: #fff!important;
            }
        }
    }
    /* END- default state - homepage header nav*/

    /* START- default state - other pages header nav(property details+home val)*/
    .header{
        .header__hamburger{
            circle {
                fill: #7C7A61;
            }
            svg rect{
                fill:#fff!important;
            }
        }
        ul.navigation li.navigation__item{
        color:#000;
            .sub-nav__link {
                color: #FFF;
                background-color: #000;
            }
            .sub-nav__link:hover {
                color: #FFF;
                background-color: #7C7A61;
            }
            .navigation__link:after{
                background: #000;
            }
        }
        .search__btn svg {
            color:#000;
        }
    }
    /* END - default state - other pages header nav(property details+home val)*/

    /* START - scrolled state header nav in all pages(including homepage)*/
    &.scroll .header{
        background-color: #ebe7e0;
        .header__hamburger{
            circle {
                fill: #7C7A61;
            }
            svg rect{
                fill:#fff!important;
            }
        }
        ul.navigation li.navigation__item{
        color:#000;
            .sub-nav__link {
                color: #000;
                background-color: #fff;
            }
            .sub-nav__link:hover {
                color: #FFF;
                background-color: #7C7A61;
            }
            .navigation__link:after{
                background: #000;
            }
        }
        .search__btn svg {
            color:#000;
        }
        a.header__btn-contact{
            background: transparent;
            color: #7C7A61!important;
            border-color: #7C7A61!important;
            &:hover{
                background: #7C7A61!important;
                color: #000!important;
                border-color: #7C7A61!important;
            }
        }
    }
    /* ENd - scrolled state header nav in all pages(including homepage)*/
}
/* END - header nav theme*/
Leave a Comment