All menu bars arent sticky

[Sandberg]

Hi,

I’m having some problems making my header sticky.

The header consists of 3 bars, all are made sticky but all do not follow when I scroll down.

This is how it looks like before I start scrolling:

This is how it looks after I scroll down a bit:

This is how it looks when I scroll up to the top after having scrolled down a bit:

The Z indexes are:
Bar 1 - 9999
Bar 2 - 9998
Bar 3 - 9997

Do you know what the problem is? I want all 3 bars to be sticky and follow when I scroll, preferably without any shrink or delay.

[tristup]

Hi Pontus,

I have checked and it seems that you have set the Shrink Amount to 0 for the Sticky bars, I went ahead and set it to 1 and now all bars are sticky.

Thanks

[Sandberg]

Perfect, thank you! I thought that only affected how much the bar would shrink in size

[prakash_s]

You are most welcome Pontus.

[Sandberg]

I found another error with this on mobile now though. The breadcrumbs jump around when scrolling slowly down mobile, I can’t show you since I can’t attach video. I am using Safari on mobile and I believe the error is caused by the delay in the breadcrumbs to become sticky.

If you can’t replicate it I can try to upload the video to Google Drive

[Sandberg]

Another error arose on Desktop with this solution. If you scroll down past the H1 on a page, e.g. https://www.eleconomista.es/finanzas-personales/forex/ and then scroll back up, you’ll notice that the content bounces down in the process where the menu becomes sticky and overlaps the H1.

This is on Desktop on Chrome

[marc_a]

Hey Pontus,

I highly suggest uploading a video to Google Drive so that we can check the issue properly on the mobile view. It would also suggest sharing your device name and browser version.

On the other hand, I tried to replicate the issue about the content bouncing back on my development website when the header is set to sticky but I am not able to replicate it. That being said. we need to check your header settings properly. To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[Sandberg]

Hi again,

I added the requested info in a secure note, thank you!

[christian]

Hey Pontus,

The Login URL does not exist.

I have a suggestion for the issues though and I’ll start with the sticky bars covering the h1. Upon checking, the Height of your Bar 2 and Bar 3 are set to auto. Try using a fixed height like 50px.

Setting a fixed height might also help the breadcrumbs bar issue.

By the way, the issues you’ve added in this thread are not related to the original topic. Just to let you know, mixing topics usually cause confusion and missing details. To avoid that, we kindly ask that you open 1 topic per thread.

Thanks.

[Sandberg]

Hi Christian,

Sorry about that, we changed location of the site. Your suggestion worked though, so thank you very much for the help

[prakash_s]

You are most welcome Pontus.