[sonanskiParticipant]

Hi, I want the topbar (I’m assuming is using the class .x-topbar) to be sticky with the navigation when the user scrolls down.

Please advise.

Thanks.

http://www.scottonanski.com

[RupokMember]

Hi there,

Thanks for wriitng in! It’s possible with some JS and CSS.

#1. You can add this under Custom > JavaScript in the Customizer.

jQuery( function($) {    
      $(window).on("scroll", function () {    
    if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
      $('.x-topbar').addClass('x-topbar-fixed-top');
                }else {
                        $('.x-topbar').removeClass('x-topbar-fixed-top');
                }   
  }).scroll();
});

#2. Then add this under Custom > CSS in the Customizer.

.x-topbar.x-topbar-fixed-top {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
}
.x-navbar.x-navbar-fixed-top {
	top: 46px;
}

Hope this helps.

[sonanskiParticipant]

Yep. That’s exactly what I was looking for. Thank you.

However, there is one minor issue where the nav and topbar both “skip” down a few pixels. Any idea how to fix that?

[LelyModerator]

Hi There,

You’re welcome!
I did check your site and I didn’t see the code implemented so I cannot see the issue.

[sonanskiParticipant]

Sorry, I changed it. 🙂

But I’m changing is back now as we speak.

[Rue NelModerator]

Hello There,

Thanks for updating in! I have checked your site and please update your custom css. You can make use of this:

body .x-topbar.x-topbar-fixed-top {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
}

body.logged-in .x-navbar.x-navbar-fixed-top {
	top: 32px;
}

We would loved to know if this has work for you. Thank you.

[sonanskiParticipant]

Ya, it’s still doing the little skip thing.

It appears as though x-topbar is scrolling outside the viewport of the browser window, then jumping into its fixed position, thus causing the ‘skip’ to happen.

Perhaps it’s something in the custom js?

Thanks again for your help.

[JadeModerator]

Hi there,

Please try to update this code:

.x-navbar-fixed-top {
    top: 0;
    left: 0;
    right: 0;
}

to

.x-navbar-fixed-top {
    top: 46px;
    left: 0;
    right: 0;
}

Hope this helps.

[sonanskiParticipant]

Nope. That doesn’t work either.

The x-top bar is scrolling past the viewport, then back into position. This is that is causing the “skip”.

Maybe reproduce the bug with the first solution given? Then finding a solution and posting it here.

Thanks.

[Rue NelModerator]

Hello There,

Did you disable the Topbar? May we ask some permission to enable it back or could you please enable it back?

Thank you in advance.

[sonanskiParticipant]

I changed the site back for you. I need this working ASAP.

Thanks.

[Rue NelModerator]

Hello There,

Thanks for putting it back. When I view your site, it looks this way:

Could you please send us a screenshot so that we will have an idea of how it looks like from your end?

And by the way, there is another thread which request to have a sticky topbar and it it has a different solution give. Maybe you can also check it out, apply it to your site and maybe compare to the current solution which is best. Read it more here: https://community.theme.co/forums/topic/sticky-topbar/#post-795687

Please let us know how it goes.

[sonanskiParticipant]

The problem is that the x-topbar doesn’t stop when it scrolls to the top of the page. The x-topbar scrolls past the viewport by about 10px then skips into place.

A screenshot won’t show this. You will have to navigate to the page and give it a try.

Thanks for looking at this.

[sonanskiParticipant]

Maybe the javascript can be applied to make the masthead sticky instead of the top bar?

[Rue NelModerator]

Hello There,

Thanks for updating in! I would suggest that you do the solution as suggested from the thread: https://community.theme.co/forums/topic/sticky-topbar/#post-795687

Because the solution their combines the menu and the topbar which is why there should be no skipping of the topbar area as soon as someone scroll on the page.

Please let us know how it goes.

[Author]

Posts