Two very popular things that are kind of annoying when used together are menu bars and . 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:

- Screen Shot 2019 02 20 at 2 - A quick CSS algorithm for handling the WP Admin bar with a fixed menu
The CSS developer for my website’s theme – me – did not take the time of day.

That’s definitely something I can deal with on my personal , 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 – 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 screens – as you can see in the CodePen above – due to the WP ’s relative positioning on , 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:

  1. CodePen collection of CSS algorithms
  2. A blog post, Writing CSS Algorithms (that has been popular so far! cool!)
  3. 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!

Source link


Please enter your comment!
Please enter your name here