La Barra di Amministrazione WordPress si Sovrappone alla Navigazione di Twitter Bootstrap

Question

La Barra di Amministrazione WordPress si Sovrappone alla Navigazione di Twitter Bootstrap

21 feb 2013, 01:32:48

Visualizzazioni: 33.7K

Voti: 11

Sto riscontrando un problema con la barra di amministrazione WordPress che si sovrappone alla barra di navigazione di Twitter Bootstrap (2.3.0). Ho provato questa soluzione:

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

ma purtroppo il problema persiste. Mi chiedo quali altre soluzioni siano disponibili?

TheWebs

1.1K

css html navigazione twitter bootstrap admin bar

Tutte le risposte alla domanda

Non ha funzionato per me, ma ho trovato una buona soluzione. Nel tuo header.php usa la funzione WordPress per verificare se la toolbar è visualizzata, e poi crea un div vuoto sotto il div della navbar:

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

Filtah

261

6 mar 2013 17:30:52

Commenti

Ottima soluzione. Mi piace che sia molto più semplice della risposta accettata e che verifichi is_admin_bar_showing(), non solo se l'utente è loggato, il che è buono considerando che qualcuno potrebbe essere loggato ma aver disattivato la barra di amministrazione. Grazie!

Mark Rummel

15 mag 2014 21:49:51

A partire da WordPress 3.8, l'altezza della barra di amministrazione è di 32px.

cowgill

31 ott 2014 11:41:47

È un po' un hack ma ho trovato che questa sia la soluzione migliore. Upvotato

plushyObject

17 nov 2015 22:12:34

Soluzione leggermente modificata utilizzando la logica ternaria e uno stile inline: <nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

28 lug 2016 03:28:03

Ho preferito questa soluzione rispetto alla risposta accettata. Ho implementato una logica simile che supporta l'altezza mobile utilizzando una media query: http://pastebin.com/dWxm00Hu lo stile è in un tag inline, ma puoi spostarlo nel file style.css del tuo tema.

GabLeRoux

29 dic 2016 21:10:31

Mostra i restanti 2 commenti

Commenti

Perché non hai inserito il css in style.css, ad esempio, invece di incorporarlo nell'html? Sarebbe una soluzione più elegante. Inoltre, grazie per il tuo lavoro e per l'idea!

therufa

14 gen 2016 16:19:29

@MaxRuf Hai assolutamente ragione. Un file CSS separato e accodato sarebbe meglio. Stavo solo pensando alle persone che trovano questo post, in modo che possano facilmente copiare/incollare. Meno probabilità di incontrare problemi.

Michael Ecklund

23 feb 2016 18:22:09

puoi provare questo:

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

se questo funziona per te (e dovrebbe!), allora dovrai spostare la barra di amministrazione di WordPress in fondo inserendo il codice qui sotto nella cartella dei plugin o nel tuo file 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>';
}
// nell'area di amministrazione
add_action( 'admin_head', 'fb_move_admin_bar' );
// nell'area pubblica
add_action( 'wp_head', 'fb_move_admin_bar' );

come alternativa puoi usare questo plugin

non mi piace molto usare i plugin perché la maggior parte di essi carica script con codici inutili di cui non ho bisogno... le soluzioni 1 e 2 sopra funzionano bene, ma se non dovessero funzionare per te, puoi provare la soluzione 3 qui sotto:

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

Questo sembra funzionare bene per me senza i problemi dei 28px..

Tamara

302

3 mar 2013 17:51:38

Non ha funzionato per me finché non ho aggiunto questo al tag body:

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

Dopodiché ha funzionato perfettamente!

timhc22

139

21 mar 2013 12:05:48

Correzione per Bootstrap 2 & 3 navbar-fixed-top per evitare la sovrapposizione del menu del sito con il menu di amministrazione di WordPress

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

Correzione per Bootstrap 4 fixed-top per evitare la sovrapposizione del menu del sito con il menu di amministrazione di WordPress

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

user49936

21

4 apr 2014 22:59:52

Perfetto! Esattamente quello che cercavo, però ho fatto qualcosa di leggermente diverso nel passo 3. Non sono sicuro che conti, ma il mio codice è così...

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Utilizzo un nome di classe CSS personalizzato.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Utilizzo il nome di classe CSS predefinito di WordPress.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

Hai menzionato di aggiungerlo in posti diversi, ma l'ho sempre fatto così e sembra funzionare bene. Grazie per la soluzione!

Brandon Morgan

1

7 mag 2014 19:46:21

Commenti

E cosa hai fatto esattamente di diverso?

kaiser

7 mag 2014 20:21:22

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

Come prevenire la sovrapposizione della barra di amministrazione di WordPress con la barra di navigazione Twitter Bootstrap.

In risposta a: Barra di amministrazione WordPress che si sovrappone alla navigazione Twitter Bootstrap

Domanda posta da: @TheWebs

Se stai usando Twitter Bootstrap con WordPress e hai un problema con la barra di amministrazione di WordPress che si sovrappone alla tua barra di navigazione, probabilmente sei piuttosto frustrato con alcune di queste risposte. Ho cercato soluzioni ovunque prima di decidere finalmente di scalare marcia e trovare una soluzione che facesse esattamente quello che volevo.

Quindi ecco una risposta che non nasconde la barra di amministrazione di WordPress, né la sposta in fondo alle pagine. Questa soluzione manterrà la barra di amministrazione di WordPress proprio dove dovrebbe essere... In cima alle tue pagine.

Nota che ci vorranno pochi semplici passaggi per completare, ma ne vale la pena. Non è un processo davvero complicato o che richiede tempo. Volevo solo assicurarmi che la spiegazione su come farlo fosse chiara e facile da seguire/capire.

Passo 1

Aggiungi get_body_class(); al tag <body> del tuo tema.

I temi hanno un tag template per il tag body che aiuterà gli autori dei temi a stilizzare più efficacemente con CSS. Il Template Tag si chiama body_class. Questa funzione dà all'elemento body diverse classi e può essere aggiunta, tipicamente, nel tag HTML body di header.php.

Apri il tuo tema WordPress attualmente attivo che usa Twitter Bootstrap trova header.php e aprilo.
Cerca <body>.
Sostituisci con <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

Dopo aver completato i tre passaggi sopra, hai ora abilitato con successo il tuo tema WordPress con le classi body di WordPress.

Passo 2 (OPZIONALE!)

Aggiungi classi CSS condizionali personalizzate al tag <body>.

Di default, WordPress fornisce già una lista di classi predefinite al tag HTML, se stai usando le funzioni body_class() o get_body_class().

Se visualizzi il codice sorgente di qualsiasi pagina front-end renderizzata sul tuo sito WordPress, noterai che due delle classi CSS aggiunte automaticamente al tag HTML <body> sono "logged-in" e "admin-bar".

Noterai anche che quei nomi delle classi CSS sono aggiunti al tag HTML <body> solo se l'utente è loggato, altrimenti non saranno aggiunti al tag HTML <body>.

Quindi se non vuoi usare i nomi delle classi CSS predefiniti di WordPress, puoi aggiungere i tuoi molto facilmente.

Apri il tuo tema WordPress attualmente attivo che usa Twitter Bootstrap. Trova functions.php e aprilo.
Aggiungi add_filter('body_class', 'mbe_body_class'); in cima al file.
Aggiungi il seguente codice, in fondo al file.

Il codice:

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

Ora, se visualizzi il codice sorgente di qualsiasi pagina front-end renderizzata sul tuo sito WordPress, se l'utente è loggato, vedrai che "body-logged-in" è stato aggiunto al tag HTML <body>, e se l'utente è disconnesso, vedrai che "body-logged-out" è stato aggiunto al tag HTML <body>.

Passo 3

Aggiungi il codice CSS al tuo tema.

Questa è la sezione di codice che correggerà il tuo tema per visualizzare sia la barra di amministrazione di WordPress, sia la tua navigazione Twitter Bootstrap correttamente, sia che l'utente sia loggato o disconnesso dal tuo sito.

Apri il tuo tema WordPress attualmente attivo che usa Twitter Bootstrap. Trova functions.php e aprilo.
Aggiungi add_action('wp_head', 'mbe_wp_head'); in cima al file.
Aggiungi il seguente codice, in fondo al file.

Il codice:

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Utilizzando il nome della classe CSS personalizzata.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Utilizzando il nome della classe CSS predefinita di WordPress.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

MODIFICA AL CODICE

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

Questa versione della funzione mbe_wp_head include una media query mobile-first, per assicurarsi che l'header sia spostato verso il basso della giusta distanza. Per mobile, la barra di amministrazione WP è alta 48px. Dopo il breakpoint di 783px, la barra di amministrazione si riduce a soli 28px di altezza.

Ecco fatto. Se l'utente è loggato, dovresti ora avere la barra di amministrazione di WordPress in cima alla tua pagina, immediatamente seguita dalla tua navigazione Twitter Bootstrap. Se l'utente è disconnesso dal tuo sito WordPress, la tua navigazione Twitter Bootstrap dovrebbe comunque essere visualizzata appropriatamente in cima al tuo sito.