Barre d'administration WordPress chevauchant la navigation Bootstrap Twitter

Question

Barre d'administration WordPress chevauchant la navigation Bootstrap Twitter

10

30850 2013-02-20

J'ai unproblème avec labarre d'administration WordPress chevauchant labarre denavigation Twitter Bootstrap (2.3.0). J'aiessayé cette solution:

 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 celaposetoujours unproblème. Jeme demande quels correctifs sont disponibles?

I am having an issue with the WordPress admin bar overlapping the Twitter Bootstrap (2.3.0) nav bar. I have tried this fix:

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

but alas it is still posing an issue. I am wondering what fixes are available?

5 réponses

votes

Filtah · Answer 1 · 2013-03-06

25

2013-03-06

Celan'apasfonctionnépourmoi,maisj'aitrouvé unebonne solution.Dans votre header.php,utilisez lafonction wordpresspour demander si labarre d'outilsest affichée,puis créez un div vide sous le div de labarre denavigation:

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

Didn't work for me, but I found a nice fix. In your header.php use the wordpress function to query if the toolbar is displayed, and then create an empty div below the navbar 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">

Excellent correctif.J'aime lefait que cela soitbeaucoupplus simple que la réponse acceptéeet qu'il recherche `is_admin_bar_showing ()`,pas seulement si l'utilisateurest connecté,ce quiestbien comptetenu dufait que quelqu'unpeut être connecté,mais désactivé labarre d'administration.Merci!

Great fix. I like that this is much simpler than the accepted answer and that it looks for `is_admin_bar_showing()`, not just if the user is logged in, which is good considering someone may be logged in, but turned off the admin bar. Thanks!
- 0
- 2014-05-15
- Mark Rummel
Àpartir de WordPress 3.8,la hauteur de labarre d'administrationest de 32pixels.

As of WordPress 3.8, the admin bar height is 32px.
- 3
- 2014-10-31
- cowgill
C'est unpeu Hackymaisj'aitrouvé que c'était lameilleure solution.Votepositif

This is a little bit Hacky but I have found this to be the best solution. Upvoted
- 0
- 2015-11-17
- plushyObject
Solution légèrementmodifiée utilisant une logiqueternaireet un styleen ligne: `
> `

Slightly modified solution using ternary logic and an inline style: `
>`
- 0
- 2016-07-28
- Mark Rummel
J'aipréféré cette solutionpar rapport à la réponse acceptée.J'aifait une logique similaire quiprenden charge la hauteurmobileen utilisant une requêtemultimédia: le style http://pastebin.com/dWxm00Huest dans unebaliseen ligne,mais vouspouvez le déplacer vers le `style.css` de votrethème.

I prefered this solution compared to accepted answer. I did a similar logic that supports the mobile height using media query: http://pastebin.com/dWxm00Hu style is in an inline tag, but you can move this to your theme's `style.css`.
- 0
- 2016-12-29
- GabLeRoux
C'estbien sauf que sur un appareilmobile,le décalagen'estpas de 32pixelsmais de 46pixels.Pourtenir compte de cela,j'ai utilisé une classe CSS au lieu d'un style.Voici la classe quipeut être appliquée: `.fix_wp_overlap { hauteurmin: 32px; } @ écranmultimédiaet (max-width: 782px) { .fix_wp_overlap { haut: 46px!important; } } `

This is good except on a mobile device the offset is not 32px but 46px. To account for this I used a CSS class instead of a style. Here's the class that can be applied: `.fix_wp_overlap { min-height: 32px; } @media screen and (max-width: 782px) { .fix_wp_overlap { top: 46px !important; } }`
- 1
- 2017-03-01
- surfbuds
- 0
- 2020-06-30
- GabrielC

Tamara · Answer 2 · 2013-03-03

3

2013-03-03

vouspouvezessayer ceci:

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

si celafonctionnepour vous (ce qui devrait être le cas!),alors vous devrez déplacer labarre d'administration wp vers lebasen collant le code ci-dessous dans un dossierplugins ou votrefichierfunctions.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,vouspouvez utiliser ceplugin

Jen'aimepas vraiment utiliser desplugins car laplupart desthèmes chargentmon script avec des codesfaux dontje n'aipasbesoin ... les solutions 1et 2 ci-dessusfonctionnentbien,mais si celane fonctionnepaspour vous,vouspouvezessayer 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 a semblébien fonctionnerpourmoi sans lesproblèmes de 28pixels.

you can try this:

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

if that does work for you (which it should!), then you'll have to move the wp admin bar to the bottom by sticking the code below into a plugins folder or your functions.php file:

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

as an alternative you can use this plugin

i dont really like using plugins because most of theme load my script with bogus codes i dont need... solution 1 and 2 above works fine, but if it doesnt work for you, you can try solution 3 below:

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

That seemed to work for me fine without the 28px issues..

timhc22 · Answer 3 · 2013-03-21

2

2013-03-21

Celan'apasfonctionnépourmoijusqu'à ce quej'aie ajouté ceci à labalisebody:

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

Ensuite,cela abien fonctionné!

It didn't work for me until I added this to the body tag:

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

Then it worked fine!

user49936 · Answer 4 · 2014-04-04

2

2014-04-04

Correction de Bootstrap 2 & amp;3 navbar-fixed-toppour éviter le chevauchement dumenu du site avec lemenu d'administration de WordPress

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

Correction de Bootstrap 4 fixed-toppour éviter le chevauchement dumenu du site avec lemenu d'administration de WordPress

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

Fix for Bootstrap 2 & 3 navbar-fixed-top to prevent overlapping of site menu with WordPress admin menu

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

Fix for Bootstrap 4 fixed-top to prevent overlapping of site menu with WordPress admin menu

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

user51355 · Answer 5 · 2014-05-07

0

2014-05-07

Parfait!Juste ce queje cherchais,cependant,j'aifait quelque chose d'unpeu différemment à l'étape 3. Jene suispas sûr que cela comptemaismon 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 avezmentionné l'ajout à différentsendroits,maisje l'aitoujoursfait comme çaet cela sembletrèsbien fonctionner.Mercipour la solution!

Perfect! Just what I was looking for, however, I did something a little differently in step 3. Not sure that it matters but my code looks like this...

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

You mentioned adding in different places, but I have always done it like this and it seems to work just fine. Thanks for the fix!

Et qu'avez-vousfaitexactement de différent?

And what exactly did you do different?
- 1
- 2014-05-07
- kaiser