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

9

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

headers admin-bar

— Mella
fuente

8

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

— Zach Lysobey
fuente

66

Esto (incorrectamente) afecta a todos los usuarios registrados. Considere la respuesta de Brent en su lugar.

— Chris Burgess

22

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.

— Brent
fuente

1

body.admin-bar es el selector correcto (y esta es la respuesta correcta). La respuesta de Zach L afecta a todos los usuarios registrados, pero solo los usuarios registrados con permisos de edición de contenido tienen la barra de administrador visible y necesitan que el encabezado se mueva hacia abajo de la página.

— Chris Burgess

interesante ... Nunca he tenido una configuración personal con ningún usuario sin estos permisos. Me imagino que es lo mismo que si en la configuración del usuario deshabilitaran la barra de administración.

— Zach Lysobey

Nota de versión: .admin-barya no aparece en WordPress 4. Ahora se llama #wpadminbary no ajusta el contenido, por lo tanto, lo anterior no se puede aplicar a la versión 4+

— Raptor

También está disponible una versión SASS, junto con una explicación para las resoluciones de móviles / computadoras de escritorio (sitios web receptivos) y el primer enfoque móvil: sitepoint.com/getting-sticky-headers-wordpress-admin-bar-behave

— Ministro

¿Cómo funcionará esto una vez que el usuario se esté desplazando hacia abajo? Luego, la barra de navegación de wp se atascará "casi en la parte superior de la pantalla", lo que se ve bastante estúpido

— FooBar

1

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.

— Ezzat Ali
fuente

1

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')

— ykay dice Reinstate Monica
fuente

1

Por favor, editar su respuesta , y añadir una explicación: ¿por qué podría que resolver el problema?

— fuxia

Cambiar '.site-header' a 'body' consiguió que esto funcionara para mí.

— Kaji

1

Esto también funciona

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

— AnDongNing
fuente

Intente agregar un poco de explicación: esto permitirá que el OP y los futuros usuarios aprendan y comprendan lo que está sucediendo en lugar de ser solo un lugar donde las personas escriban su código para ellos. Gracias por responder.

— Tony Djukic

0

Acabo de usar este CSS.

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

— JanetE
fuente

-1

Prueba esto, funciona bien

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

— Andrii khmelovskyi
fuente

-2

dar la barra de navegación superior

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

— Deepak Kumar
fuente