Barra de administración de WordPress superpuesta a la navegación de Twitter Bootstrap

Question

Barra de administración de WordPress superpuesta a la navegación de Twitter Bootstrap

21 feb 2013, 01:32:48

Vistas: 33.7K

Votos: 11

Tengo un problema con la barra de administración de WordPress que se superpone a la barra de navegación de Twitter Bootstrap (2.3.0). He intentado esta solución:

body.admin-bar .navbar-fixed-top {
    top: 28px;
}

.navbar .brand {
    color: #000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px
        rgba(255, 255, 255, 0.125);
    font-weight: bold !important;
}

.nav-container {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs, .nav-pills {
    margin-top: -6px;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
    {
    color: #fff !important;
}

#inner-header {
    width: 100%;
}

input,textarea,select,.uneditable-input {
    margin-bottom: 0;
}

.navbar-form,.navbar-search {
    margin: 0 0 9px;
}

.navbar-search {
    padding-left: 0;
}

#s {
    width: 100px;
}

pero desafortunadamente todavía presenta problemas. ¿Qué soluciones hay disponibles?

TheWebs

1.1K

css html navegación twitter bootstrap barra de administracion

Todas las respuestas a la pregunta

No funcionó para mí, pero encontré una buena solución. En tu archivo header.php usa la función de WordPress para verificar si la barra de herramientas se está mostrando, y luego crea un div vacío debajo del div de la barra de navegación:

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Solución para solapamiento del menú
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">

Filtah

261

6 mar 2013 17:30:52

Comentarios

Excelente solución. Me gusta que esto es mucho más simple que la respuesta aceptada y que verifica is_admin_bar_showing(), no solo si el usuario está conectado, lo cual es bueno considerando que alguien podría estar conectado pero haber desactivado la barra de administración. ¡Gracias!

Mark Rummel

15 may 2014 21:49:51

A partir de WordPress 3.8, la altura de la barra de administración es de 32px.

cowgill

31 oct 2014 11:41:47

Esto es un poco improvisado pero he encontrado que es la mejor solución. Votado a favor

plushyObject

17 nov 2015 22:12:34

Solución ligeramente modificada usando lógica ternaria y un estilo en línea: <nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

28 jul 2016 03:28:03

Preferí esta solución comparada con la respuesta aceptada. Implementé una lógica similar que soporta la altura móvil usando media query: http://pastebin.com/dWxm00Hu el estilo está en una etiqueta inline, pero puedes mover esto al style.css de tu tema.

GabLeRoux

29 dic 2016 21:10:31

Mostrar los 2 comentarios restantes

Comentarios

¿Por qué no pusiste el CSS en style.css, por ejemplo, en lugar de incrustarlo en el HTML? Sería una solución más elegante. ¡También gracias por tu trabajo y la idea!

therufa

14 ene 2016 16:19:29

@MaxRuf Tienes toda la razón. Un archivo CSS separado encolado sería mejor. Solo estaba pensando en las personas que encuentran esta publicación, para que puedan copiar/pegar fácilmente. Menos probabilidades de encontrar problemas.

Michael Ecklund

23 feb 2016 18:22:09

puedes probar esto:

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

si eso funciona para ti (¡lo cual debería!), entonces tendrás que mover la barra de administración de wp hacia abajo colocando el código de abajo en la carpeta de plugins o en tu archivo functions.php:

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// en el área de administración
add_action( 'admin_head', 'fb_move_admin_bar' );
// en el área pública
add_action( 'wp_head', 'fb_move_admin_bar' );

como alternativa puedes usar este plugin

no me gusta mucho usar plugins porque la mayoría carga scripts con códigos innecesarios que no necesito... las soluciones 1 y 2 de arriba funcionan bien, pero si no funcionan para ti, puedes probar la solución 3 a continuación:

function stick_admin_bar_to_bottom_css() {
echo "

html {
padding-bottom: 28px !important;
}

body.admin-bar {
margin-top: -28px;
}

#wpadminbar {
top: auto !important;
bottom: 0;
}

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}

";
}

add_action('admin_head', 'stick_admin_bar_to_bottom_css');
add_action('wp_head', 'stick_admin_bar_to_bottom_css');

Eso pareció funcionar bien para mí sin los problemas de los 28px..

Tamara

302

3 mar 2013 17:51:38

No funcionó para mí hasta que agregué esto a la etiqueta body:

<body <?php body_class(); ?>>

¡Entonces funcionó correctamente!

timhc22

139

21 mar 2013 12:05:48

Solución para Bootstrap 2 & 3 navbar-fixed-top para evitar que el menú del sitio se superponga con el menú de administración de WordPress

.admin-bar .navbar-fixed-top {
  top:46px;
  @media screen and (min-width:782px) {
    top:32px;
  }
}

Solución para Bootstrap 4 fixed-top para evitar que el menú del sitio se superponga con el menú de administración de WordPress

.admin-bar .fixed-top {
  top:46px;
  @media screen and (min-width:782px) {
    top:32px;
  }
}

user49936

21

4 abr 2014 22:59:52

¡Perfecto! Justo lo que estaba buscando, sin embargo, hice algo un poco diferente en el paso 3. No estoy seguro de que importe, pero mi código se ve así...

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Usando un nombre de clase CSS personalizado.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Usando el nombre de clase CSS predeterminado de WordPress.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

Mencionaste agregarlo en diferentes lugares, pero siempre lo he hecho así y parece funcionar bien. ¡Gracias por la solución!

Brandon Morgan

1

7 may 2014 19:46:21

Comentarios

¿Y qué hiciste exactamente de manera diferente?

kaiser

7 may 2014 20:21:22

Michael Ecklund 6.8K · Accepted Answer · 2013-10-06T20:22:36Z

Cómo evitar que la barra de administración de WordPress se solape con tu barra de navegación de Twitter Bootstrap.

En respuesta a: La barra de administración de WordPress se solapa con la navegación de Twitter Bootstrap

Preguntado por: @TheWebs

Si estás usando Twitter Bootstrap con WordPress y tienes un problema con la barra de administración de WordPress solapándose con tu barra de navegación, probablemente estés bastante frustrado con algunas de estas respuestas. Busqué soluciones por todos lados antes de decidir finalmente bajar un cambio y encontrar una solución que haga exactamente lo que necesito que haga.

Así que aquí tienes una respuesta que no oculta la barra de administración de WordPress, ni la mueve al final de tus páginas. Esta respuesta mantendrá la barra de administración de WordPress justo donde pertenece... En la parte superior de tus páginas.

Por favor, ten en cuenta que esto tomará unos cuantos pasos cortos para completarse, pero vale la pena. No es realmente un proceso complicado o que consuma mucho tiempo. Solo quería asegurarme de que la explicación sobre cómo hacerlo fuera clara y fácil de seguir/entender.

Paso 1

Añade get_body_class(); a la etiqueta <body> de tu tema.

Los temas tienen una etiqueta de plantilla para la etiqueta body que ayudará a los autores de temas a estilizar de manera más efectiva con CSS. La Etiqueta de Plantilla se llama body_class. Esta función da al elemento body diferentes clases y puede ser añadida, típicamente, en la etiqueta HTML body de header.php.

Abre tu tema de WordPress activo actual que usa Twitter Bootstrap directorio. Encuentra header.php y ábrelo.
Encuentra <body>.
Reemplaza con <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

Después de completar los tres pasos anteriores, ahora has habilitado exitosamente tu tema de WordPress con las clases body de WordPress.

Paso 2 (¡OPCIONAL!)

Añade clases CSS condicionales personalizadas a la etiqueta <body>.

Por defecto, WordPress ya provee una lista de clases predeterminadas a la etiqueta HTML body, si estás usando las funciones body_class() o get_body_class().

Si ves el código fuente de cualquier página renderizada en el front-end de tu sitio WordPress, notarás que dos de las clases CSS añadidas automáticamente a la etiqueta HTML <body> son "logged-in" y "admin-bar".

También notarás que esos nombres de clases CSS solo son añadidos a la etiqueta HTML <body> si el usuario está logueado, de otra manera no serán añadidos a la etiqueta HTML <body>.

Así que si no quieres usar los nombres de clases CSS predeterminados de WordPress, puedes añadir los tuyos muy fácilmente.

Abre tu tema de WordPress activo actual que usa Twitter Bootstrap directorio. Encuentra functions.php y ábrelo.
Añade add_filter('body_class', 'mbe_body_class'); al inicio del archivo.
Añade el siguiente código, al final del archivo.

El código:

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

Ahora, si ves el código fuente de cualquier página renderizada en el front-end de tu sitio WordPress, si el usuario está logueado, verás que "body-logged-in" ha sido añadido a la etiqueta HTML <body>, y si el usuario no está logueado, verás que "body-logged-out" ha sido añadido a la etiqueta HTML <body>.

Paso 3

Añade el código CSS a tu tema.

Esta es la sección de código que corregirá tu tema para mostrar tanto la barra de administración de WordPress, como tu navegación de Twitter Bootstrap apropiadamente, ya sea que el usuario esté logueado o no en tu sitio web.

Abre tu tema de WordPress activo actual que usa Twitter Bootstrap directorio. Encuentra functions.php y ábrelo.
Añade add_action('wp_head', 'mbe_wp_head'); al inicio del archivo.
Añade el siguiente código, al final del archivo.

El código:

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Usando nombre de clase CSS personalizado.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Usando nombre de clase CSS predeterminado de WordPress.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

EDITADO AL CÓDIGO

add_action('wp_head', 'mbe_wp_head');
function mbe_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}

Esta versión de la función mbe_wp_head incluye una consulta de medios mobile-first, para asegurar que tu encabezado sea empujado hacia abajo la distancia apropiada. Para móviles, la barra de administración de WP tiene 48px de alto. Después del punto de quiebre de 783px, la barra de administración se reduce a solo 28px de alto.

Ahí lo tienes. Si el usuario está logueado, ahora deberías tener la barra de administración de WordPress en la parte superior de tu página, inmediatamente seguida por tu navegación con Twitter Bootstrap. Si el usuario no está logueado en tu sitio WordPress, tu navegación con Twitter Bootstrap aún debería mostrarse apropiadamente en la parte superior de tu sitio web.