Docs

[rick_156]

Hi Guys,

I followed the instructions from forum post #198807 to anchor the topbar along with the nav menu. It seems to work great except for one small glitch.

When you start to scroll, the menu and the logo “jumps” to the left and the menu “jumps” to the right quickly before snapping back into place. It’s a minor glitch, but it’s annoying. Is there any way to correct that?

The site is:
http://www.lydonhosting.com/sallc/

Thanks for your help!

[Darshana]

Hi there,

Thanks for writing in! Upon checking, I see that you have the following custom CSS rule which is the reason that you’re experiencing that glitch. Could you please try removing it.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 85px;
}

Hope that helps.

[rick_156]

Thank you for your help. It looks like that CSS rule is being generated by the Javascript code I pulled from Post #198807. Can you review that script in my file to see what the issue might be?

I’ll follow this post with my login info privately.

Thanks!

[rick_156]

This reply has been marked as private.

[Nabeel A]

HI there,

It is the JQuery script that is causing the issue, please replace it with the code in the following thread https://community.theme.co/forums/topic/cannot-get-top-bar-to-stay-sticky-in-integrity/#post-302691

Let us know how this goes!

[rick_156]

Thanks Nabeel.

Unfortunately that didn’t work. It shifted the whole top bar content to the right and when you scroll, it extended the top bar from the current left margin all the way to the far right of the window, beyond the normal right margin of the boxed layout.

I had to revert the code back to the original for client review.

Let me know if you have any other thoughts.

Thanks,
Rick

[Rue Nel]

Hello Rick,

I am another staff checking on this thread! Could we try a different approach? Temporarily, please disregard your custom css for the fix topbar and also temporarily remove the JS code. What are we going to do is to load the topbar within the container of the navbar because the glitch is coming from your JS code against the topbar. To do this, simply add the following JS code instead:

(function($){
  $('.x-topbar').insertBefore('.x-navbar-inner');
})(jQuery);

This is just the code needed and no other JS code. I think this is much simplier compared to the previous code.

Hope this would work out for you.

[rick_156]

Fantastic!!! This worked like a charm! Thank you Rue Nel!

[Jade]

You’re most welcome.

[Author]

Posts