¿Barra de administración y problema de encabezado fijo?

He diseñado mi encabezado para tener una posición superior fija. Mientras está conectado a WordPress, la barra de navegación del administrador de wp cubre la sección superior de mi encabezado, haciendo imposible acceder a mi navegación superior. Me gustaría que wp admin nav empuje mi navegación superior a continuación para que ambos sean visibles. ¿Alguien sabe de alguna solución para solucionar este problema?

Puede encontrar un ejemplo de mi problema en ... www.nickriversdesign.com/dev

en su CSS podría intentar algo como: body.logged-in{margin-top:20px;}o si esto no funciona algún otro código usando la .logged-inclase

Intente agregar esto a su archivo CSS:

body.admin-bar #branding-wrap{top: 28px;} 
body.admin-bar #wrapper{margin-top: 145px;}

la body.admin-bardeclaración en el frente asegurará que estos estilos solo se apliquen cuando la barra de administración esté visible.

Creo que, en dispositivos con anchos más pequeños, wpadminbar no está posicionado fijo. Entonces, si desplaza el documento en un teléfono inteligente, la barra de administración seguirá el desplazamiento y no permanecerá en la parte superior de la ventana. Teniendo esto en cuenta, ¿por qué no agregar algunos javascript en el pie de página de su tema justo después de la wp_head()llamada? De esta forma podemos orientar el ancho del dispositivo y si el documento tiene o no la barra de administración. Luego, simplemente haga algunas reglas CSS y añádalas al encabezado del documento, como se muestra a continuación.

<script>
( function(e) {
    var ab = document.getElementById( 'wpadminbar' );
    if ( typeof( ab ) === 'object' && window.innerWidth >= 610 ) {
        var abh = ab.offsetHeight || ab.clientHeight || ab.scrollHeight;
        var style = document.createElement( 'style' );
        style.id = 'adminbar_main_nav_controle_rules';
        document.getElementsByTagName( 'head' )[0].appendChild( style );
        var rules = document.createTextNode( 'body.admin-bar .main-navigation.fixed { margin-top: ' + abh + 'px !important; }' );
        style.appendChild( rules );
        console.debug( 'wpadmibar space is covered' );
    }
})();
</script>

Suponiendo que su navegador tiene una clase 'main-navigation'y en el desplazamiento, agrega otra clase con el nombre 'fixed'. Cambie el CSS para apuntar a su panel de navegación reemplazándolo 'body.admin-bar .main-navigation.fixed'por el que desee apuntar al suyo.

Se puede mejorar aún más, por ejemplo, verificando si la barra de administración está fija o no, pero por ahora, espero que ayude.

Prueba esto para WordPress 4+. Comprueba si la barra de administración está presente y, si es así, mueve el encabezado fijo hacia abajo un poco para compensar.

    //fix for admin bar
    if ($('#wpadminbar')[0])
        $('.site-header').css('top', '32px')

Esto también funciona

body.logged-in > header {  
    margin-top: 32px;  
}  

Acabo de usar este CSS.

body.admin-bar #main-header  {
padding-top: 32px }

Prueba esto, funciona bien

$(document).ready(function() {
    if ($('#wpadminbar')[0]) {
        $('header').css('top', '32px')
    }
});

dar la barra de navegación superior

.navbar-fixed-top {
    border-width: 0 0 1px;
    padding: 0;
    position: relative!
}