[Resolved] Really sticky header – on all pages – without any animation

[wo]

Hi all, I love GPP, but it’s always been a complicated relationship with your Sticky Headers. For this site

Reference

I have actually managed to really stick the header, one for all pages and all media. Now, refreshing my own site

Current

I’m stuck in the middle. I want this header stick exactly as it sticks on the first site. Just different colors etc.

What is the secret?

Thanks in advance
Wolfram

[Ying]

Hi Wolfram,

If you don’t need an animation, you can just use CSS to make the header/navigation sticky without enabling the GP sticky navigation.

So can you disable GP’s sticky navigation for now?

One question, why the non-stick navigation background color is set to white not blue?

[wo]

Hey Ying,

thank you. Sticky nav is OFF now.

I’m completely honest with you, I have no idea at all, why this white is not blue. Of course, my plan is to have a fixed header, under all scrolling circumstances, color: white, background: blue.

I hope you can help me out. With some magic lines of CSS 🙂

[wo]

Meanwhile, I applied Customize > Color > Header > Background: Blue.

No effect.

My logo is still there. White on white. Sophisticated 🙂

Navigation text gets blue on hover, at least.

My problem is, I have really no idea, how this can be fixed. Relevant settings seem to be scattered all over the place.

[Ying]

Meanwhile, I applied Customize > Color > Header > Background: Blue.

As you are using navigation as header option, so there’s no header on your site.

The colour option would be at Customize > Color > Primary navigation > Backgrounds.

Once the background color is set, you can add this CSS to make it sticky:

nav#site-navigation {
    position: sticky;
    top: 0;
}

[wo]

You are so right. Marvelous!

So there is just one issue yet. I am struggling with the responsive positioning of the logo in the upper left corner. My stupid CSS

.sticky-navigation-logo {
margin-left: 125px;
}

is roughly approximating, what I’d like to see on all viewports: desktop, pad, phone.

Do I have to work it out with @media etc. or is there a shortcut?

Perfect, if the logo is left aligned with the content, under all screen circumstances.

[Ying]

Based on your design, I would recommend disabling the mobile header option at customizer > layout > header.

Can you do that first and let me know 🙂

[wo]

Ok. Layout > Header > Sticky is OFF.

[Ying]

I mean: customizer> layout > header > mobile header > off.

[wo]

Sorry. Got it. Done.

[Ying]

Now can you go to customizer > layout > primary navigation > Menu Item Height, click the mobile icon and set the value to 60px instead of 20px?

let me know!

[wo]

Awesome. 60px is too much. I reduced to 40px. Looks great.

Now, finally: this header should work for any page on the site. That’s not the case. What did I wrong?

[Ying]

this header should work for any page on the site

Yes 🙂

So it’s all good now?

Let me know if there’s any other issue related to this topic.

[wo]

It’s endless … you know it better than me 🙂

To finish this topic, last question: the logo sticks to the right.

Please give me a clue, how it can be left-aligned with the content underneath.

[wo]

I mean, the logo sticks to the left – just in case you didnt see it by yourself 🙂

[Author]

Posts