In the past, we’ve discussed how you can style certain areas of your LightCMS site to show up differently depending on whether the user is in admin or preview mode. This doesn’t help, however, in cases where the admin bar interferes with the design of your site. Your client will have an admin bar every time they login, so they’ll also see examples of your incompetence as a developer any visual discrepancies it introduces every time as well.
Honestly, if it’s a purely aesthetic bug that’s not particularly easy to work around, I usually just explain to the client that they’re only seeing this as an admin and won’t ever encounter it on the live site. For smaller projects it’s simply not worth extra time and cost to make sure a few pixels line up nicely.
But what when it’s not just an aesthetic issue?
Sometimes problems introduced by the admin bar are more serious, such as covering up vital site components or pushing important elements out of alignment.
Here’s an example we encountered during a site build last week – a menu toggle (shown on the left as it was designed) that completely disappeared when we built out the site (shown on the right):
In this case the menu was being covered up by the admin bar and we simply needed to bump the menu container down the page a bit. Though it would only require a few lines of CSS, LightCMS doesn’t provide us with any native classes to hook into when someone is logged in as an administrator. In other words – there’s no built-in way to serve a different set of CSS rules to the visitor based on whether they are logged in or not.
Fortunately, adding our own hook via jQuery is easy enough. All we need to do is check if the class for the admin menus exists on the page and, if so, add an appropriate class to the html element:
Now you can use the .adminBarPresent class in your CSS to adjust elements accordingly and provide a better experience for admin users.