Position Sticky / Fixed Header relative to WP admin bar

Tips
1

Hi there,

Coming from Cwicly Community Facebook group. I noticed this when I tried to make a sticky header. Fixing the header on the top is now my sticky solution and it works well, but the catch is the header covers the WP admin bar on the frontend so I can’t access it anymore.

I was trying to figure it out myself but still can’t get my head around it. Found the thread below but it was started 10 years ago. Things have changed a lot in WP core so there seems not a generally accepted way to do it.

Experts like @Marius could you please share some tips for doing this so beginners like me can learn? :slightly_smiling_face:

Thanks in advance.

Regards,

Acon

2

Hey @Acon and welcome to the forum.

The solution here is actually pretty simple.
The idea behind it is to show your fixed header on the very top (or wherever you want it to stick) and in case the admin bar is displayed, an offset of the admin bars’ height is applied to the header.

The easiest solution is to go with the Cwicly settings’ custom code option because everything you enter here will only get applied on front-end.

image
image958×577 11.6 KB

For copy & paste purposes, just replace the class with your actual selector (the one of your fixed header block):

<style>
  .your-header-block {
      top: var(--wp-admin--admin-bar--height,0);
  }
</style>

Let me know if it works out for you or in case something is unclear.

1 Like
3

Thank you so much @Marius ! It works like a charm. You’re a legend. :+1:

I noticed that this can’t be used together with the Scroll Down → Slide Up setting described here: Show & Hide Header on Scroll - Wordpress Gutenberg - YouTube since the slid-up header just stops at a position that partially covers the admin bar. :joy:

Guess we can only choose one way but not both…

Regards,

Acon

1 Like
4

There shouldn’t be any issues with it @Acon.
Do you have a live site, so I could check the CSS rules and see what’s going wrong?

5

Hi @Marius,

Here is the website:
https://docs.better3d.cn/

or check the GIF attached.
Animation-

Thanks.

Regards,
Acon

6

Hey @Acon.

Your header block has the same z-index as the admin bar.
Decreasing the z-index by only 1 should hide your header properly behind the admin bar.

Hope that helps.

7

Oh God. What didn’t I think of it? :man_facepalming:

Now everything works exactly as I need. Every day you learn a bit more and that feels good. :slightly_smiling_face:

Thanks so much again @Marius for helping!

8

Just to be clear - if I make a second header to be displayed in a different context – I would then have to give that header the same class or modify it somehow ?

9

As long as it has a class that applies the admin bar height variable, it doesn’t have to share any other similarity.

top: var(--wp-admin--admin-bar--height,0);