Header transparency to opaque on scroll

Support
#21

If I need to start a different thread I can and my pre-apologies :slight_smile: but I want to accomplish something like this and have googled and searched the forum all night to no luck or being a novice-coder :slight_smile:

On desktop I want a transparent header to start and then white on scroll ā€¦ probably with the option for a variation of the client logo on the transparent header before scroll.

Site Iā€™m developing lives at http://77.104.151.163/~timothyj/

Iā€™m looking for something like the header effect on scroll that lives here https://right3.com/

Thanks!

#22

Hi,

To achieve that you can ad the code below in Theme Options > JS



jQuery(function($) {
  $(window).scroll(function (event) {
    if( $(window).scrollTop()==0) {
       $('.x-navbar').removeClass('x-navbar-fixed-top');
    }
   });
});

Then add this in Theme Options > CSS

@media(min-width: 980px) {
      .home .masthead  {
            position:absolute;
            width:100%;
            background-color:transparent !important;
     
       }
       body.x-navbar-fixed-top-active .x-navbar-wrap {
            height: auto;
       }

.home .x-navbar {
      background-color:transparent !important;
}

.home .x-navbar.x-navbar-fixed-top {
     background-color:#fff !important;
}
  }

Hope that helps

#23

Thanks so much! works great! ā€¦ If I wanted to deploy a different logo and white header links while transparent and then back to what I have on scroll (kind of like this thread) ā€¦ is that beyond the scope of help? ā€¦ if so, thanks either way!

#24

Hi,

Yes, that is outside the scope of support but to give you something to start with, you can change your current logo to make it more visible then add the code below in Theme Options > CSS

.home .x-navbar .desktop .x-nav > li > a {
    color: #fff;
}
.home .x-navbar.x-navbar-fixed-top  .desktop .x-nav > li > a {
    color:#5a5a5a;
}

.home  .x-navbar.x-navbar-fixed-to .x-brand.img {
    width: 250px;
    height: 63px;
    background: url(http://77.104.151.163/~timothyj/wp-content/uploads/2018/10/Oconnor-Logo-1.png) top center no-repeat;
    background-size: contain;
}

.home  .x-navbar.x-navbar-fixed-to .x-brand img {
    opacity:0
}

Hope that helps