header theming

mail@pastecode.io avatar
unknown
plain_text
a month ago
3.5 kB
2
Indexable
Never
/* START - header nav theme*/
nav#global-navbar{
    .navigation__link{
        font-size: 16px;
        text-transform: uppercase;
    }
   .lp-container {
           max-width: 1450px;
   }
   /* START - default state - homepage header nav*/
   .header__logo .logo__img {
      max-height: 100px;
      padding-top: 0;
      max-width: 350px;
      @media only screen and (max-width: 768px){
              max-width: 250px;
              max-height: 80px
      }
  }
  .header.theme-light{
   .header__hamburger{
       circle {
           fill: #fff;
       }
       svg rect{
           fill: #050E3D!important;
       }
   }
   ul.navigation li.navigation__item{
   color:#fff;
   text-transform: uppercase;
       .sub-nav__link {
           color: #000;
           background-color: #fff;
           max-width: 420px;
       }
       .sub-nav__link:hover {
           color: #fff;
           background-color: #050E3D;
       }
       .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: #050E3D!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: #050E3D;
       }
       svg rect{
           fill: #fff;
       }
   }
   ul.navigation li.navigation__item{
   text-transform: uppercase;
          color: #000;
       .sub-nav__link {
           color: #000;
           background-color: #fff;
           max-width: 420px;
       }
       .sub-nav__link:hover {
           color: #fff;
           background-color: #050E3D;
       }
       .navigation__link:after{
           background: #050E3D;
       }
   }
   .search__btn svg {
       color: #050E3D;
   }
   
  }
/* END - default state - other pages header nav(property details+home val)*/
  
/* START - scrolled state header nav in all pages(including homepage)*/
&.scroll .header{
      padding-top: 30px;
      padding-bottom: 30px;
   background-color: #ffff!important;
   .header__hamburger{
       circle {
           fill: #050E3D!important;
       }
       svg rect{
           fill: #fff!important;
       }
   }
   ul.navigation li.navigation__item{
   text-transform: capitalize;
   color:#000;
       .sub-nav__link {
           color: #000;
           background-color: #fff;
           max-width: 420px;
       }
       .sub-nav__link:hover {
           color: #fff;
           background-color: #050E3D;
       }
       .navigation__link:after{
           background: #050E3D;
       }
   }
   .search__btn svg {
       color: #fff;
   }
   a.header__btn-contact{
       background: transparent;
       color: #050E3D!important;
       border-color: #fff!important;
       &:hover{
           background: #fff!important;
           color: #050E3D!important;
           border-color: #fff!important;
       }
   }
   .logo__img.dark{
       display: block; 
   }
   .logo__img.light{
       display: none; 
   }
  
  }
  /* ENd - scrolled state header nav in all pages(including homepage)*/
}
Leave a Comment