web-dev-qa-db-fra.com

WordPress Admin Bar Overlapping Twitter Bootstrap Navigation

J'ai un problème avec la barre d'administration WordPress qui chevauche la barre de navigation Twitter Bootstrap (2.3.0) J'ai essayé ce correctif:

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

mais hélas cela pose toujours un problème. Je me demande quels correctifs sont disponibles?

csshtmlnavigationtwitter-bootstrapadmin-bar
9
TheWebs

Comment empêcher la barre d'administration WordPress de se chevaucher avec votre barre de navigation Twitter Bootstrap.

En réponse à: barre d’administration de WordPress chevauchant la navigation bootstrap de Twitter

Question de: @TheWebs

Si vous utilisez Twitter Bootstrap avec WordPress et que vous rencontrez un problème de chevauchement de la barre d'administration WordPress avec votre barre de navigation, vous êtes probablement assez frustré par certaines de ces réponses. J'ai cherché des solutions partout avant de décider de passer à une vitesse inférieure et de trouver une solution qui répond exactement à mes besoins.

Voici donc une réponse qui ne cache pas la barre d’administrateur de WordPress, ni ne déplace la barre d’administrateur de WordPress au bas de vos pages. Cette réponse gardera la barre d’administrateur de WordPress à l’endroit où elle se situe ... En haut de vos pages.

S'il vous plaît noter que cela va prendre quelques étapes pour terminer, mais ça vaut le coup. Ce n'est pas vraiment un processus compliqué ou fastidieux. Je voulais juste m'assurer que l'explication sur la façon de le faire était claire et facile à suivre/comprendre.

Étape 1

Les thèmes ont une balise de modèle pour la balise body qui aidera les auteurs de thème à styler plus efficacement avec CSS. La balise de modèle s'appelle body_class . Cette fonction donne à l'élément body différentes classes et peut être ajoutée, en général, dans la balise HTML body de header.php.

  1. Ouvrez votre thème WordPress actuellement actif à l’aide du répertoire Twitter Bootstrap. Trouvez header.php et ouvrez-le.
  2. Rechercher <body>.
  3. Remplacez par <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

Après avoir suivi les trois étapes ci-dessus, vous avez activé votre thème WordPress avec les classes de corps WordPress.

Étape 2 (FACULTATIF!)

  • Ajoutez des classes CSS conditionnelles personnalisées à la balise <body>.

Par défaut, WordPress fournit déjà une liste de classes par défaut à la balise HTML, si vous utilisez les fonctions body_class() ou get_body_class().

Si vous affichez le code source de n'importe quelle page frontale rendue sur votre site Web WordPress, vous remarquerez que deux des classes CSS ajoutées automatiquement à la balise HTML <body> sont "connecté" et "admin-bar".

Vous remarquerez également que ces noms de classes CSS ne sont ajoutés à la balise HTML <body> que si l'utilisateur est connecté, sinon ils ne seront pas ajoutés à la balise HTML <body>.

Donc, si vous ne souhaitez pas utiliser les noms de classe CSS WordPress par défaut, vous pouvez ajouter les vôtres très facilement.

  1. Ouvrez votre thème WordPress actuellement actif à l’aide du répertoire Twitter Bootstrap. Trouvez functions.php et ouvrez-le.
  2. Ajoutez add_filter('body_class', 'mbe_body_class'); en haut du fichier.
  3. Ajoutez le code suivant, au bas du fichier.

Le code: 

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

Maintenant, si vous affichez le code source de n'importe quelle page d'accueil rendue sur votre site Web WordPress, si l'utilisateur est connecté, vous verrez que "corps connecté" a été ajouté à la balise HTML <body>, et si l'utilisateur est déconnecté, vous verrez que "body-not-out" a été ajouté à la balise HTML <body>.

Étape 3

  • Ajoutez le code CSS à votre thème.

C’est la section de code qui corrigera votre thème afin d’afficher correctement la barre d’administration de WordPress et votre navigation Twitter Bootstrap, que l’utilisateur soit connecté ou déconnecté de votre site Web.

  1. Ouvrez votre thème WordPress actuellement actif à l’aide du répertoire Twitter Bootstrap. Trouvez functions.php et ouvrez-le.
  2. Ajoutez add_action('wp_head', 'mbe_wp_head'); en haut du fichier.
  3. Ajoutez le code suivant, au bas du fichier.

Le code: 

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

EDIT TO CODE 

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

Cette version de la fonction mbe_wp_head inclut une requête multimédia sur mobile first, afin de vous assurer que l'en-tête est déplacé sur la distance appropriée. Pour mobile, la barre WP admin a une hauteur de 48px. Après le point d'arrêt de 783px , la barre d’administration est réduite à 28px seulement.

Voilà. Si l'utilisateur est connecté, vous devriez maintenant avoir la barre d'administration WordPress tout en haut de votre page, immédiatement suivie de votre navigation Twitter Bootstrapped. Si l'utilisateur est déconnecté de votre site Web WordPress, votre navigation Twitter Bootstrap devrait toujours s'afficher correctement en haut de votre site Web.

16
Michael Ecklund

Cela n'a pas fonctionné pour moi, mais j'ai trouvé une solution intéressante. Dans votre header.php, utilisez la fonction wordpress pour demander si la barre d’outils est affichée, puis créez un div vide en dessous de la barre de navigation div:

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Fix menu overlap
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">
23
Filtah

vous pouvez essayer ceci:

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

si cela fonctionne pour vous (comme il se doit!), vous devrez alors déplacer la barre d'administration wp vers le bas en collant le code ci-dessous dans un dossier plugins ou votre fichier 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>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

comme alternative, vous pouvez utiliser ce plugin

je n'aime pas vraiment utiliser les plugins car la plupart des thèmes chargent mon script avec des codes erronés dont je n'ai pas besoin ... Les solutions 1 et 2 ci-dessus fonctionnent bien, mais si cela ne fonctionne pas pour vous, vous pouvez essayer la solution 3 ci-dessous:

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

Cela semblait fonctionner pour moi très bien sans les problèmes 28px ..

3
Tamara

Cela n'a pas fonctionné pour moi jusqu'à ce que je l'ajoute à la balise body:

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

Ensuite, cela a bien fonctionné!

1
timhc22

Correction de Bootstrap 'navbar-fixed-top' pour éviter le chevauchement du menu du site avec le menu d'administration de WordPress

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

Parfait! Juste ce que je cherchais, cependant, j’ai fait quelque chose de légèrement différent à l’étape 3. Je ne suis pas sûr que cela soit important, mais mon code ressemble à ceci ...

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

Vous avez mentionné l'ajout à différents endroits, mais je l'ai toujours fait comme ça et cela semble bien fonctionner. Merci pour le correctif!

0
user51355