Two very popular things that are kind of annoying when used together are fixed menu bars and WordPress. Why? Well, if the person writing CSS for your theme doesn’t take the time of day, you will eternally have something like this in the logged in state:
That’s definitely something I can deal with on my personal site, but for the sites I work on at work, it is not acceptable. I know, because I tried to get away with it and someone was like, “fix that”. So I said fine.
Here is a CSS algorithm – that is, “a well-defined declaration or set of declarations that produces a specific styling output” – that uses a couple of custom properties to accomplish that task:
See the Pen CSS Algorithm to handle a fixed menu and the WP Admin Bar by Lara Schenck (@laras126) on CodePen.
Have I mentioned how much I 💜 custom properties?!
The above algorithm isn’t perfect on small screens – as you can see in the CodePen above – due to the WP admin bar’s relative positioning on mobile, but it’s definitely better that doing nothing. And most (all?) editors and stakeholders for the PMC sites use WordPress on computers, so again, better than nothing.
And…I would be remiss if I did not link to:
- CodePen collection of CSS algorithms
- A blog post, Writing CSS Algorithms (that has been popular so far! cool!)
- My talk that started it all, The Algorithms of CSS (people seem to like it! so cooL!)
Okay, back to, um, work now that I have successfully written a short blog post!