Mehmet Mehmet - 1 month ago 6
CSS Question

How to adjust header and admin-bar on Wordpress

I am trying to design a wordpress theme that has a problem with admin bar. If I select "don't show user bar" it's working properly. But when I want to see admin bar in the top, the themes looks like picture I attached. I couldn't see my logo its accurate size.

enter image description here

Answer

you could customize the admin bar layout by making it almost transparent in order to see what lies beneath it. This can be accomplished by overriding the default admin bar style used by WordPress so to make it 30% opacity and fully visible only on hover:

function my_theme_setup() {
    add_theme_support( 'admin-bar', array( 'callback' => 'my_admin_bar_style') );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

function my_admin_bar_style() {
?>
<style>
    #wpadminbar {position:fixed;opacity:0.3;}
    #wpadminbar:hover {opacity:1;}
</style>
<?php
}