Two sticky bars (mobile & desktop)

[timschouwink]

Hi,

I just found out that the Pro header issue with two sticky bars (mobile & desktop for instance) (leaving a transparent gap the size of one bar) still exists. This is a bug that already is there since the launch of Pro. I searched the forums and there is no fix. I can add a class to the mobile bar and add some css:

.barmob {
top: 0px !important;
}

Which fix the transparent gap above the bar. Only thing is that it leaves a very clumsy transition on scroll.

Any other workaround so we can at least launch a site with two sticky bars?

Thanks!

url: http://wandering-koala.flywheelsites.com/

[Joao]

Hi There,

Right now the solution you used is the one I personally also choose on these cases.

I could not replicate the clumsiness you mention on my devices.

On which device are you experiencing the issue?

Thanks

[timschouwink]

Hi,

It’s on mobile (iphone X), Safari. I tested Android, same case.

Thanks

[nabeel]

Hi again,

I checked your setup and I see a JavaScript error in browser’s console related to a third party plugin (revslider-revealer-addon) this coould be breaking the JS. please first try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains.

Let us know how it goes!

[timschouwink]

Hi Nabeel,

This is the first thing I always check. But that is not causing the problem. I deactivated all plugins, so you can check again…

Thanks!

[rad]

Hi there,

How about improving it’s transition effect, like this

.barmob {
    top: 0px !important;
    transition: 0.5s all;
}
    .barmob * {
        transition: 0.4s all !important;
    }

The logo has delay effect since it’s done through javascript. But it has nice transition with that CSS.

Thanks!

[timschouwink]

Hi Rad,

Thanks! I see this affects the logo indeed, but the bar just has a sort of ‘Tick’ upon scroll. It just not feels right. Can you try and see what i mean. It’s not smooth in any way…and it should not be this way.

Thanks!

[Joao]

Hi There,

Unfortunately, there is a known issue with having more than one sticky bar with the header builder.

At this point, I would suggest you hiding the elements instead of the bar to avoid that.

You can click on your logo and inline elements > customize tab and hide them and do the same for your menu elements and logo for mobile.

Hope it helps and thanks for understanding.