Transparent header that changes colors when scrolling

[webxid]

Hi, i was wondering how I could get a fixed (sticky) header bar to change color when scrolling down the page?

[ruenel]

Hello Daniel,

Thanks for writing in!

You can enable the sticky header by setting the Navbar Top Position in X > Theme Options > Headers to “Fixed Top”.
And then, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar {
    transition: background 0.5s Ease;
}

.x-navbar.x-navbar-fixed-top {
    background-color: red;
}

Feel free to change the color.

[webxid]

@RueNel

.x-navbar {
transition: background 0.5s Ease;
}

.x-navbar.x-navbar-fixed-top {
background-color: red;
}

Doesn’t quite seem to work. My header bar turns white and doesn’t move down the page. I have already inseretd the transparent header code but maybe its wrong? What I want is for the header to be transparent at first and then change black when i start scrolling down the page.

[whistlermedia]

You’ve added the CSS, now try adding the following code to the JS section in your customizer.

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

Change the “90” to whatever the height of your navbar is set to. See if this helps.

[friech]

Hi @webxid,

Is that your site URL below? It seems you did not set your Navbar Position as Fixed Top as instructed by Ruenel above.

Please do so and add the CSS code provided again in Theme Options > CSS

If that did not work alone, please try adding the JS provided by @whistlermedia in Theme Options > JS area.

Let us know how it goes,
Cheers!

[webxid]

Yes, my site is digitalxid.com
I have tried doing all of the above but still doesnt work. I have my header fixed when I scroll down, but what I would like is for the header to be transparent at first (at the top of the page) and change color to black when I start scrolling down the page.

[ruenel]

Hello Daniel,

Would you mind providing us access to your site so that we can resolve this issue for you? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

[webxid]

Digitalxid.com

[ruenel]

Hello There,

Thanks for updating in!

I have made some changes and now the navbar is transparent and have a black background when you scroll the page.

What I did?

• I added this custom css:

/* added by X staff */
@media(min-width: 980px){
	.page .x-navbar {
		transition: background 0.5s Ease;
  	background-color: transparent !important;
	}

	.page .x-navbar.x-navbar-fixed-top {
		background-color: black !important;
	}

  .page .cs-content > .x-section {
    padding-top: 200px !important;
  }
}

• And I change the navbar top height in X > Theme Options > Header to 0.

Please check your site now.

[webxid]

Awesome! Thank you!

[nabeel]

Glad we could help.

Cheers!