Pro Header - Second Bar Not Staying Sticky

Hi,

I have problem I cannot quite find the solution for. I have a top bar which contains the logo and below that another bar containing the ubermenu.

Both bars are set to be sticky. The top bar also has element CSS (supplied by you guys :grinning:, which works great) to reduce the logo size on scrolling.

However, when scrolling the top bar does exactly as expected, but the menu bar disappears off the top of the screen and the whole of the content area is whited-out! The website is in the earliest days of development so only the Contact page (https://www.mindbodymanagement.co.uk/contact/ has enough content to show the problem. All login credentials are in a secure note.

A second minor issue I would appreciate help with is to do with the aforementioned CSS for the logo image (top bar > image element >element CSS). Is it possible to replace the main logo with another image upon scroll when the top bar become sticky?

I hope you can help with this.

Many thanks,
Christopher

Hello Christopher,

Thanks for writing in!

I can see that you have installed a caching plugin, LiteSpeed. Please clear all your plugin caches and temporarily disable this plugin while we are troubleshooting the problem.

I have checked your header and I’ve seen the different bars set to display in specific screen sizes. I would recommend that you arrange the bars in this manner:

  • Topbar Example 1
  • Topbar Example 2
  • Topbar Example 1 desktop
  • Topbar Example 2 desktop
  • Topbar Example 1 Tablet
  • Topbar Example 2 Tablet
  • Topbar Example 1 Mobile
  • Topbar Example 2 Mobile

Hope this helps.

Hi,

Sorry for the delay in replying. The cache has been cleared and its plugin disabled. The issue seems to have disappeared as a result. Thanks for the help,

Christopher

Glad to hear that. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.