Sticky nav PRO header broken on scroll

[macvink]

Hi there,

On a couple of my websites I’m having an issue with the Sticky navbar in the PRO header.

The navbar is supposed to be the width of the white sheet, which it is when you first load the page. Once you scroll down however, the navbar resizes and sometimes moves to the side. It also creates a white background-box thing at the top.

How can I resolve this??

Thanks so much in advance!

-Karianne

[rad]

Hi Karianne,

Thanks for reaching out.

May I know the URL that has this issue? I checked the site from your screenshot but I couldn’t find the issue from the posts especially for the one with the sidebar.

Thanks!

[macvink]

Hi!

So sorry about that! It’s on a sub url and I totally forgot to tell you!

The sites are:

Basisschool Kleurrijk in Waddinxveen | Voor christelijk onderwijs

Basisschool Veerkracht te Amsterdam | Voor Christelijk onderwijs

On Kleurrijk the header works perfectly on the homepage but on any other page that you can scroll on, the nav gets all messed up. Here’s a link to a page with the issue.

Visie & Missie - GBS Kleurrijk

On veerkracht the issue is happening everywhere, also on the homepage.

Thanks so much in advance!

-Karianne

[alexander]

Hi Karianne,

Thank you for sharing this. I can see the issue you’re having, but regretfully after some investigation haven’t been able to discern why it is happening like that. Would you mind providing login details as well? You can do this by adding a secure note to your reply. This would help us get a closer look at how the bars are configured, and why this error is occurring. Thanks!

[macvink]

Hi!

Thanks so much for the effort. I will provide you with login credentials in a secure note.

Thanks!

[nabeel]

Hey Vink,

I tried both of your site credentials and neither of them is working on my end (see screenshot) can you please double check the username and password and see if they work on your end?

Thanks!

[macvink]

Hi,

I’m so sorry I see that I completely messed up the secure note. The below one is correct.

Sorry about that!!

[rad]

Hi Vink,

Thanks for the credentials, and it’s due to this custom CSS especially the padding.

body:not(.home) .x-container.max {
    max-width: 1000px;
    background-color: white;
    padding: 30px 30px 30px 30px;
    box-shadow: 0px 0px 50px #444;
}

That’s why it doesn’t happen on home page as it’s mean for non-home page class :not(.home). I recommend removing that padding

Cheers!