Menu icon Foundation
The Wordpress Admin Bar: Getting it to play nice with Foundation 5

I've been running into the problem where when I'm logged into the Wordpress admin area and look at my custom theme, based on Foundation 5, when the screen gets 600px or smaller, the admin bar jumps down 46px.

The problem is that in the admin-bar.css (and admin-bar.min.css) files, there's a declaration that #wpadminbar moves from fixed to absolute when the screen is 600px or smaller.

Here's how to fix it.

In your stylesheet, add the following code below. By adding it to your stylesheet rather than fixing the actual files, you'll be sure that your code survives the next WP update.

@media screen and (max-width: 600px) {
    #wpadminbar {
		position: fixed !important;
	}
}
            

         

wordpressadmin barFoundation 5

I've been running into the problem where when I'm logged into the Wordpress admin area and look at my custom theme, based on Foundation 5, when the screen gets 600px or smaller, the admin bar jumps down 46px.

The problem is that in the admin-bar.css (and admin-bar.min.css) files, there's a declaration that #wpadminbar moves from fixed to absolute when the screen is 600px or smaller.

Here's how to fix it.

In your stylesheet, add the following code below. By adding it to your stylesheet rather than fixing the actual files, you'll be sure that your code survives the next WP update.

@media screen and (max-width: 600px) {
    #wpadminbar {
		position: fixed !important;
	}
}
            

         
Bjoern Dammann over 5 years ago

Thank you, Chris. I had the same issue when migrating to F5.

Dave Daverson over 5 years ago

Hi guys,

Here's a relevant ticket on WP's bug tracker: https://core.trac.wordpress.org/ticket/26609

Kirsten Cassidy over 5 years ago

Or in functions.php:

add_action('wp_head', 'add_header_styles');

function add_header_styles() {
if ( is_admin_bar_showing() ) {?>
<style>
.contain-to-grid{margin-top: 32px; } // or .top-bar
@media screen and (max-width: 600px){ // or wherever the layout breaks
.contain-to-grid{margin-top: 46px; } // again or .top-bar
#wpadminbar {position: fixed !important; }
}
</style>
}

Rescue Themes about 5 years ago

Thanks Kirsten! Works a treat for me.

Just a small update to your function because PHP wasn't started again (in case there are other functions being added below it):

add_action('wp_head', 'add_header_styles');

function add_header_styles() {
  if ( is_admin_bar_showing() ) {?>
    <style>
    .top-bar{margin-top: 32px; } 
    @media screen and (max-width: 600px){
    .top-bar{margin-top: 46px; } 
    #wpadminbar {position: fixed !important; }
    }
    </style>
  <?php }
}

Bark Kreative almost 5 years ago

I've tried most of these fixes, I even gave Zurb the original fix for the bar but now something is making the bar just simply disappear. Anyone getting that now?

Rescue Themes almost 5 years ago

Not sure if there was an update to WordPress but just this seems to work for me now:

add_action('wp_head', 'add_header_styles');

function add_header_styles() {
  if ( is_admin_bar_showing() ) {?>
    <style>
    @media screen and (max-width: 600px){
      #wpadminbar {position: fixed !important; }
    }
    </style>
  <?php }
}