Docs

[ncdunn88]

Hi there wizards

I’ve looked at a few different questions that approach this topic but haven’t been able to get one that hits the money.

what I’m after is the navbar to perform the same way as it does here

http://sales.outix.com.au

EXCCEPTL I want the navbar to start transparent. So far I’ve got that on my dev site

http://theplaygroundsandbox.com/outix/

But I can’t make it reduce in size and have the background go to a solid black once scrolling begins.

Please help.

[ncdunn88]

This reply has been marked as private.

[Joao]

Hi There,

Please delete de content you have at

Appereance > Customizer > Custom > Javascript and add there the following code:

jQuery(document).ready(function($){
	$('.x-navbar').addClass("x-nav-trans");
	$(window).scroll(function(){
		if( $(this).scrollTop() > 100 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});
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() >= 100 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

Add the following code to Appereance > Customizer > Custom > CSS

.x-navbar.x-nav-trans {
    background-color: black !important;
}

.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: 55px;
padding-top: 20px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 40px;
margin-top: 20px;
}

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

Adjust the values on the code according to your wishes.

Hope that helps,

Joao

[ncdunn88]

Hi There, that works almost perfectly.

However when you first load the page the navbar starts as black. Once you scroll and return to the top it functions as it should. But I need to it start as transparent.

Can you help?

Thank you so much Joao

[Rue Nel]

Hello There,

To save you from trouble, I have edited the page and made some changes to the JS code. The final JS code is this:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if( $(this).scrollTop() > 100 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});

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() >= 100 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

If you need anything else, please let us know.

[Author]

Posts