Docs

[suzannereid]

Hi! I’ve looked through so many threads and can’t find a working solution. My site is local, but here’s a link in case you’re on when i’m on (Yay for FlyWheel!) 278c3a17.ngrok.io

Here’s what I want: On load, the mav bar needs a transparent background and on scroll, i need it to go solid black and the logo to shrink about 50%. I can’t figure it out! LOL

This is the jQuery code i’ve put in: jQuery(document).ready(function($) {

function navbarChangeColor() {
var $slider = $(‘.x-slider-container.below’),
$sliderHeight = $slider.outerHeight();
$navbar = $(‘.x-navbar’);

if( $(window).scrollTop() > $sliderHeight ) {
$navbar.addClass(‘nb-trans’);
} else {
$navbar.removeClass(‘nb-trans’);
}
}

navbarChangeColor();

Any help? Thanks!

[suzannereid]

What happens now is that the nav bar is white and changes to transparent on scroll and the logo doesnt shrink.

[Joao]

Hi There,

Please add to your Appereance > Customizer > Custom > CSS

/*
// Transparent Menu Effect
*/
@media only screen and (min-width: 980px) {
body .x-navbar-wrap {
     height:auto;
}

body .x-navbar {
   
  background-color:transparent;
  padding-top: 20px;
  padding-bottom: 20px;
  transition:background-color 0.8s ease-out;
}

body .x-navbar-solid {
	background-color: #333;
  padding-top: 0px;
  padding-bottom: 0px;
  transition: background-color 0.8s ease-in-out;
}

.masthead {
    position:absolute;
    z-index: 1000;
    top:0;
    left:0;
    right:0;
}
}

.x-navbar {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: all .5s ease-in-out;
    transform: all .5s ease-in-out;
    transition: all .5s ease-in-out;
} /* Transparent Menu Effect
*/

And to Appereance > customizer > Custom > JS

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >20) {
              $('.x-navbar').addClass("x-navbar-solid");
          		
        }else {
              
          $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

And for re-sizing you can add to Custom CSS

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height12 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: 0;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

.x-navbar {
border:none;
box-shadow:none;
}

And to Custom Javscript >

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);

      }
    });
  }
});

You will need to make a few adjustments on the CSS in order to get it centered.

Hope that helps

Joao

[Author]

Posts