Archived topic

sticky navigation problems with positioning

8 replies · Started by Adam on May 22, 2020

Viewing posts 1–9 of 9

May 22, 2020 at 9:02 am #1296897

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

May 22, 2020 at 9:24 am #1296936

Hi there,

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

Let me know :)

May 22, 2020 at 3:19 pm #1297293

Hi Leo,

I did that, the issue persists.

May 22, 2020 at 5:04 pm #1297368

Hi there,

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

May 22, 2020 at 5:47 pm #1297393

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

May 23, 2020 at 2:38 am #1297759

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;
}

May 23, 2020 at 3:12 am #1297784

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.

May 23, 2020 at 4:46 am #1297862

Ok, thanks!

May 23, 2020 at 5:02 am #1297884

You're welcome

This archived topic is closed to new replies.

Start building better websites today.