Barre d'administration WordPress chevauchant la navigation Bootstrap Twitter [fermé]

10

J'ai un problème avec la barre d'administration WordPress qui chevauche la 2.3.0barre de navigation Twitter Bootstrap ( ). 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?

css html navigation twitter-bootstrap admin-bar TheWebs
la source

17

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

En réponse à: barre d'administration WordPress chevauchant la navigation bootstrap twitter

Demandé par: @TheWebs

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

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

Veuillez noter que cela prendra quelques courtes étapes, mais cela en vaut la peine. Ce n'est pas vraiment un processus compliqué ou long. Je voulais juste m'assurer que l'explication sur la façon de le faire était claire et facile à suivre / comprendre.

Étape 1

Ajoutez get_body_class();à la <body>balise de votre thème .

Les thèmes ont une balise de modèle pour la balise body qui aidera les auteurs de thèmes à styliser plus efficacement avec CSS. La balise de modèle est appelée body_class. Cette fonction donne à l'élément body différentes classes et peut être ajoutée, généralement, dans la header.phpbalise HTML du corps.

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

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

Étape 2 (FACULTATIF!)

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

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 front-end rendue sur votre site Web WordPress, vous remarquerez que deux des classes CSS ajoutées automatiquement à la <body>balise HTML sont «connectées» et «barre d'administration».

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

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.

Ouvrez votre thème WordPress actuellement actif à l'aide du répertoire Twitter Bootstrap. Trouvez-le functions.phpet ouvrez-le.
Ajoutez add_filter('body_class', 'mbe_body_class'); en haut du fichier.
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 front-end rendue sur votre site Web WordPress, si l'utilisateur est connecté, vous verrez que "body-log-in" a été ajouté à la <body>balise HTML , et si l'utilisateur est déconnecté, vous verrez "corps déconnecté" a été ajouté à la <body>balise HTML .

Étape 3

Ajoutez le code CSS à votre thème.

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

Ouvrez votre thème WordPress actuellement actif à l'aide du répertoire Twitter Bootstrap. Trouvez-le functions.phpet ouvrez-le.
Ajoutez add_action('wp_head', 'mbe_wp_head'); en haut du fichier.
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;
}

MODIFIER AU 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 comprend une requête multimédia mobile-first, pour garantir que votre en-tête est poussé sur la bonne distance. Pour les mobiles, la barre d'administration WP mesure 48 pixels. Après le point d'arrêt 783px, la barre d'administration se réduit à seulement 28px de hauteur.

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.

Michael Ecklund
la source

1

Pourquoi n'avez-vous pas mis le css dans style.css par exemple, au lieu de l'intégrer dans le html? Ce serait une solution plus élégante. Merci aussi pour votre travail et l'idée!

Max Ruf

@MaxRuf Vous avez absolument raison. Un fichier CSS séparé mis en file d'attente serait préférable. Je pensais simplement aux personnes qui trouvaient ce message, afin qu'elles puissent facilement copier / coller. Moins susceptibles de rencontrer des problèmes.

Michael Ecklund

25

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

<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">

Filtah
la source

Super solution. J'aime que cela soit beaucoup plus simple que la réponse acceptée et qu'il recherche is_admin_bar_showing(), pas seulement si l'utilisateur est connecté, ce qui est bien étant donné que quelqu'un peut être connecté, mais a désactivé la barre d'administration. Merci!

Mark Rummel

3

À partir de WordPress 3.8, la hauteur de la barre d'administration est de 32 pixels.

cowgill

C'est un peu Hacky mais j'ai trouvé que c'était la meilleure solution. Vote positif

plushyObject

Solution légèrement modifiée utilisant la logique ternaire et un style en ligne:<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

1

C'est bien, sauf sur un appareil mobile, le décalage n'est pas de 32 pixels mais de 46 pixels. Pour tenir compte de cela, j'ai utilisé une classe CSS au lieu d'un style. Voici la classe qui peut être appliquée:

.fix_wp_overlap {   min-height: 32px; }  @media screen and (max-width: 782px) { .fix_wp_overlap {     top: 46px  !important;   } }

surfbuds

3

vous pouvez essayer ceci:

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

si cela fonctionne pour vous (ce qui devrait être le cas!), vous devrez déplacer la barre d'administration wp vers le bas en collant le code ci-dessous dans un dossier de 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 bidons 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 bien fonctionner pour moi sans les problèmes de 28px ..

Tamara
la source

2

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

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

Ensuite, cela a bien fonctionné!

timhc22
la source

0

Parfait! Juste ce que je cherchais, cependant, j'ai fait quelque chose d'un peu différemment à l'étape 3. Je ne sais pas si cela importe, 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 très bien fonctionner. Merci pour le correctif!

user51355
la source

1

Et qu'avez-vous fait exactement de différent?

kaiser

0

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

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

user49936
la source