Ask your WordPress questions! Pay money and get answers fast! (more info)

Admin Bar CSS max-width hack

  • SOLVED

I need a css hack or function that will constrain the admin bar (on the front-end only) to a max-width of 1140px. It should also be centered horizontally.

Edit: I'm still looking for the black background of the bar to extend the entire width of the page, just have the bar's content constrained. Think Facebook's admin bar.

Answers (6)

2011-10-18

Jarret Minkler answers:

I think the hack here is the same as the centering of if

Create wrapper div to go around entire admin section

#wrapper {
max-width: 1140px;
text-align: center;
margin: 0px;
padding: 0px;
}


Matt Taylor comments:

I've tried just using a simple max-width on the main admin bar id, it hasn't worked for me.


Jarret Minkler comments:

Hmm I didn't say put the max-width on the admin bar .. I said make a wrapper

2011-10-18

juan manuel incaurgarat answers:

i can do it
can you please tell me which is your desired max-width?
please contact me on [email protected]


Matt Taylor comments:

1104px


Matt Taylor comments:

Sorry 1140px


juan manuel incaurgarat comments:

try this

#wpadminbar {
width:1140px;
max-width:1140px;
left:50%!important;
margin-left: -570px;
}


Matt Taylor comments:

Juan, same comment as below.


juan manuel incaurgarat comments:

something like this maybe

.quicklinks {
float:left;
margin-left: 20%!important;
}

#adminbarsearch-wrap {
float:right;
margin-right: 20%!important;
}

and delete the code on the previous answer

#wpadminbar {
width:1140px;
max-width:1140px;
left:50%!important;
margin-left: -570px;
}

2011-10-18

Abdessamad Idrissi answers:

Add this to your style css:
#wpadminbar {
width: 1140px;
left: 50%;
margin-left: -570px;
}


Matt Taylor comments:

That works for the entire bar, but I need it a level down so the blackness extends across the entire width.


Abdessamad Idrissi comments:

You can use this two actions to insert code befor and after the admin bar
do_action( 'wp_before_admin_bar_render' );
do_action( 'wp_after_admin_bar_render' );

2011-10-18

Luis Abarca answers:

I using a little of javascript/jQuery help

UPDATE: I added code for window resize event


<?php

add_action( 'after_setup_theme', 'adminbar_theme_setup' );

function adminbar_theme_setup()
{
add_theme_support( 'admin-bar', array( 'callback' => 'admin_bar_bump_callback') );
}

function admin_bar_bump_callback() { ?>
<style>
#wpadminbar {
width: 1140px;
}

</style>
<?php
}

add_action('init', 'init_theme');

function init_theme()
{
wp_enqueue_script('jquery');
}

add_action('wp_footer', 'adminbar_center');

function adminbar_center()
{
?>
<script>
(function($)
{
function resizeAdminBar()
{
var windowWidth = $(window).width();
var paddingLeft = (windowWidth / 2) - (1140 / 2);

$('#wpadminbar').css('margin-left', paddingLeft + 'px');
}

$(document).ready(function()
{
resizeAdminBar();

});

$(window).resize(function()
{
resizeAdminBar();
});
})(jQuery);
</script>
<?php
}


Luis Abarca comments:

You can even add some eye candy effects changing


$('#wpadminbar').css('margin-left', paddingLeft + 'px');


to this


$('#wpadminbar').animate({ 'left': paddingLeft + 'px'}, 100);


Example: http://dev.justoalblanco.com/
User: demo / Pass: demo

2011-10-19

Ivaylo Draganov answers:

Hello,

I think the solutions offered by the others are missing something... There is a wrapper to the admin bar already - #wpadminbar and there's an inside div.quicklinks. Isn't it as simple as adding this to your functions.php:

function style_admin_bar() {
echo '<style type="text/css">
#wpadminbar .quicklinks {
margin: 0 auto;
max-width: 1140px;
}
</style>
';
}
add_action( 'admin_head', 'style_admin_bar' ); // backend
add_action( 'wp_head', 'style_admin_bar' ); // frontend


Tested and works on the 3.3. nightly

2011-10-18

Julio Potier answers:

[info] : WordPress 3.3 coming soon, the admin bar changed ... ;)


Matt Taylor comments:

Thanks for looking out Julio. I'm running the 3.3 nightly.