Docs

[Nick]

Hi i want a new effect menu effect like

http://jituchauhan.com/wealth-demo/mortgage/index.html

1 -> menu is transparent
2 -> when user scroll down, the menu-top / nav-top background-color is changed to black

is this possible in Renew theme ?

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Nick]

This reply has been marked as private.

[Nick]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. Yes it is possible to make the navbar transparent and add a background color as soon as you scroll it. Simply add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  body.home.x-navbar-fixed-top-active .x-navbar-wrap {
      height: 0;
  }
  .home .x-navbar-inner {
    border: none;
  }

  .home .x-navbar {
    background-color: transparent !important;
    transition: all 0.35s linear;
  }

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

And then you also need to add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(function($){
  $(window).scroll(function(){
    if( $(this).scrollTop() < 150 ) {
      $('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
    }
  })
});

Please let us know if this works out for you.

[Nick]

this is great work!

[Christian]

Glad we could help. 🙂

[Nick]

as almost, always !

[Rue Nel]

If there’s anything else, we can help you with, please let us know.

[Author]

Posts