[agirlabroadParticipant]

Hello!

I’m hoping to make it so that my topbar remains fixed while scrolling down my page.

I did see the same question at https://community.theme.co/forums/topic/how-do-i-set-make-the-top-bar-fixed-like-the-nav-bar/, however I’m using a different stack so wasn’t sure if that would adjust things somewhat?

I’d appreciate any help I can get with this.

Cheeeeeeers
Caitlin

[agirlabroadParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

#1] Add the following CSS under Customizer > Custom > Edit Global CSS:

.x-topbar.topbar-fixed {
    position: fixed;
    width: 100%;
}
.x-navbar-fixed-top {
    top: 46px;
}

#2] Add the following code under Customizer > Custom > Edit Global Javascript:

jQuery(function($){ 
	var $topbar   = $('.x-topbar');
	var $header = $('.masthead.masthead-inline');
	$(window).scroll(function(event) {
		var $adminbarHeight = $('#wpadminbar').outerHeight();
		var $menuTop        = $header.offset().top - $adminbarHeight;
		var $current        = $(this).scrollTop();

		if( $current > $menuTop ){
			$topbar.addClass('topbar-fixed')
		} else {
			$topbar.removeClass('topbar-fixed')
		}
	});
});

Hope it helps 🙂

[Author]

Posts