steelbridge.io

Website Engineering With A Passion For Quality

WordPress function fixes overlapping admin bar

I used to fix the overlapping admin bar issue with CSS. For example:

.logged-in .navbar {
margin-top: 32px;
}

But that solution doesn’t work unless you’re developing with Bootstrap navigation styles. So, I found a cool way to simply tell your browser to move the

<header>

down 32px so it renders below the WordPress admin-bar. I use an inline style that activates upon the presence of the WordPress admin-bar. Place the following code in your header.php file where your navigation menu code is. Look for the

<header>

tag and duplicate my example below. Keep in mind you may have class and id names that must not be deleted or pasted over. If you are unsure or not getting the results you hope for, comment below with your questions. I’ll do my best to reply quickly.

Example:

<header
<?php
if ( is_admin_bar_showing() ){ echo 'style="margin-top:32px;"'; }
?>
>

Some of you may feel this is sort of a hack. Maybe so. But I sure like the simplicity of this solution.

Wordpress function admin-bar overlap