Change logo on scroll/navbar fixed

Hi support,
I am using the Pro theme with the hero header. I would like to change the logo when user starts scrolling as my white logo cant be see as the bar turns white as soon as I scroll…

Is it possible to change the logo when the user starts scrolling?

My website is https://gulflogix.com

Hi There,

Thank you for writing in, the way you achieve your white bar background on scroll in a bit hacky. Please remove that.

Instead, please duplicate your navigation bar (your first bar), then turn off the Sticky Bar option on that first bar, and enable only the Sticky Bar option on the duplicate bar, also check the Hide Initially option on the duplicate bar.



This way you’ll get two bars, one is a static bar which stays at the top, and one as fix bar that shows up on scroll.

This way the bar won’t show up at the same time and you can style these bars separately, you can have the static bar as transparent, and the fix bar to have the white background. You can also change the logo on the fix bar to solve your issue.

Hope it helps,
Cheers!

Thank you so much… Works great!

We are delighted to assist you with this.

Cheers!

Hi Support,
Thank you so much for your assistance thus farm the menu bar looks much better. I have another issue that I am hoping you could help with.

The mobile menu when clicked doesnt show anything, is there something that I am doing wrong?

Hello There,

Your mobile menu is working fine. It is not visible because it is behind the bar that displays the hero image. Please check the z-indexes of your bar. The first bar should have much higher number than the second one so that all the items including the menu will be on top layer of the hero header. Please also check the height of the bar and make sure that it will fit to display all the items inside the bar. And if nothing is helping, please give us access to your site so that we can check your header settings and fix the issue for you.

Best Regards.

Wow you guys answer quick, keep it up!!
Let me try that, thanks!

No Problem.
Please let us know how it goes.

Hi There,
Ive tried it with no luck. The z index is 9999 for the 1st bar but it still doesnt show maybe you can take a look please… Ive added some credentials for you

Hello There,

I have logged in and checked your header settings. It turns out that your “Content Scrolling” option is enabled. It must be turn off so that the menu dropdown will be visible.

Please check your site now.

Sorry I accidentally edit the response.

  • x staff

Hello There,

Please adjust the height of your bars. And the second bar must be hidden by default. You may also add an offset trigger so that the second bar will only display a couple of pixels after scrolling the page way passed the 1 bar.

Hope this helps.

No problem. Where can I adjust the height of the bars? I have tried the offset trigger but maybe it will work better with the height fix…Thanks for your help thus far

Hey There,

The height is still in the bar settings.

Hope this helps.

Thanks for all your help, keep it up!

You’re welcome, @fastechit. Glad we could help.

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