Admin Bar CSS max-width hack WordPress

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;
}

---

---

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]

---

---

---

---

---

Abdessamad Idrissi answers:

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

---

---

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
}


---

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