Docs

[Romain65]

Hi,

I have codes below for my navbar :

.x-navbar {
    background: transparent !important;
    transition: 0.5s all linear;
}
.x-navbar.x-navbar-fixed-top {
    transition: 0.5s all linear;
    background: rgba(0,0,0, 0.7) !important;
}

Query ( function($) {

$(window).scroll( function() {

if ( $(this).scrollTop() > 0 ) {

$('.x-navbar').addClass( 'x-navbar-fixed-top' );

} else {

$('.x-navbar').removeClass( 'x-navbar-fixed-top' );

}

} );

} );

I want to do the same with the footer. What is the code please ?

Thanks ! Great theme !

[Romain65]

This reply has been marked as private.

[Romain65]

It’s ok with :

x-colophon.bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 60px;
  padding: 2px 0 4px;
  transition: 0.5s all linear;
  background: transparent !important;
}
  
.x-colophon.bottom.x-colophon-fixed-bottom {
    transition: 0.5s all linear;
    background: rgba(0,0,0, 0.7) !important;
}

jQuery ( function($) {

$(window).scroll( function() {

if ( $(this).scrollBottom() > 0 ) {

$('.x-colophon.bottom').addClass( 'x-colophon-fixed-bottom' );

} else {

$('.x-colophon.bottom').removeClass( 'x-colophon-fixed-bottom' );

}

} );

} );

But no when return at the top… Can you complete the code please ?

Thanks

[Thai]

Hi There,

Please update your custom CSS & JS to this:

jQuery ( function($) {
	$(window).scroll( function() {
		if ( $(this).scrollTop() > 0 ) {
			$('.x-navbar').addClass( 'x-navbar-fixed-top' );
			$('.x-colophon.bottom').addClass('x-colophon-fixed');
		} else {
			$('.x-navbar').removeClass( 'x-navbar-fixed-top' );
			$('.x-colophon.bottom').removeClass('x-colophon-fixed');
		}
	} );
} );

.x-navbar,
.x-colophon.bottom {
    background: transparent !important;
    transition: 0.5s all linear;
}
.x-navbar.x-navbar-fixed-top,
.x-colophon.bottom.x-colophon-fixed {
    transition: 0.5s all linear;
    background: rgba(0,0,0, 0.7) !important;
}

Hope it helps 🙂

[Romain65]

You’re the best… Thank you !

[Lely]

You’re welcome!

Cheers!

[Romain65]

Sorry, I have an other question : how can I remove this transition effect only on one page ?

[Thai]

Hi There,

Please add the following CSS:

.page-id-123 .x-navbar,
.page-id-123 .x-colophon.bottom {
    transition: none !important
}

Replace the 123 number with your page ID.

Hope it helps 🙂

[Romain65]

This reply has been marked as private.

[Thai]

Hi There,

Could you please add the above CSS?

Thanks.

[Romain65]

You’re so fast ! Yes, but it doesn’t work…

[Thai]

Hi There,

Please try with this:

.page-id-166 .x-navbar,
.page-id-166 .x-colophon.bottom {
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: color 0 ease-in !important;
    transition: none !important;
}

Let us know how it goes!

[Romain65]

It also doesn’t work !

[Romain65]

There is no solution ?

[Lely]

Hi Romain,

I want to check why the given code is not working, unfortunately, I can’t access your site as of the moment. It is under Maintenance mode. Please do give us credentials so we can check further. Thank you.

[Author]

Posts