Really sticky header - on all pages - without any animation

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?

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 :)

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.

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

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.

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 :)

Ok. Layout > Header > Sticky is OFF.

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

Sorry. Got it. Done.

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!

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?

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.

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.

I mean, the logo sticks to the left - just in case you didnt see it by yourself :)