[Resolved] sticky navigation problems with positioning

[Adam]

Hi,

I use sticky navigation. On the post page, when I scroll down it turns sticky as expected but when I scroll further I get entire header moved hard to the right and lose it’s stickiness.

I captured it on the https://www.screencast.com/t/ztjFc7Hj

Thanks,
Adam

[Leo]

Hi there,

Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?

Let me know 🙂

[Adam]

Hi Leo,

I did that, the issue persists.

[David]

Hi there,

can you disable Autoptimize so i can see what is interfering with it.

[Adam]

Sure, I disabled it. I also changed the URL. This is the test server.

[Adam]

I found the reason why it’s happening. The code used to help stick footer of the page to the bottom make it. After removing it everything is fine. It looks like I will need to use alternative solution. I attach the problematic the code below.

@David can you please propose something else than the one below?

html,
body {
height: 100%;
}

body {
display: flex;
flex-direction: column;
}

[David]

ah – ok yeah thats a problem.
Only other thing to do with CSS would be something like this:

#page {
    min-height: calc(100vh - 240px);
}

the 240px is the combined height of the header and footer.

[Adam]

Ok, thanks!

[David]

You’re welcome

[Author]

Posts