Barra di amministrazione e problema di intestazione risolto?

9

Ho disegnato la mia intestazione per avere una posizione superiore fissa. Durante l'accesso a wordpress, la barra di navigazione dell'amministratore di wp copre la sezione superiore della mia intestazione rendendo impossibile accedere alla mia navigazione principale. Vorrei che il navigatore dell'amministratore di wp spingesse la mia navigazione superiore in basso in modo che entrambi siano visibili. Qualcuno conosce qualche soluzione per risolvere questo problema?

Un esempio del mio problema è disponibile all'indirizzo ... www.nickriversdesign.com/dev

headers admin-bar

— tacca
fonte

8

nel tuo css potresti provare qualcosa del tipo: body.logged-in{margin-top:20px;}o se questo non funziona con altri codici usando la .logged-inclasse

— Zach Lysobey
fonte

6

Questo (erroneamente) interessa tutti gli utenti che hanno effettuato l'accesso. Considera invece la risposta di Brent.

— Chris Burgess,

22

Prova ad aggiungere questo al tuo file CSS:

body.admin-bar #branding-wrap{top: 28px;} 
body.admin-bar #wrapper{margin-top: 145px;}

la body.admin-bardichiarazione in primo piano farà in modo che questi stili vengano applicati solo quando la barra di amministrazione è visibile.

— Brent
fonte

1

body.admin-bar è il selettore corretto (e questa è la risposta corretta). La risposta di Zach L ha effetto su tutti gli utenti che hanno effettuato l'accesso, ma solo gli utenti che hanno effettuato l'accesso con autorizzazioni di modifica del contenuto hanno la barra di amministrazione visibile e devono spostare l'intestazione nella pagina.

— Chris Burgess,

interessante ... Non ho mai avuto una configurazione personale con nessun utente senza queste autorizzazioni. Immagino che sia lo stesso che se nelle impostazioni utente disabilitano la barra di amministrazione.

— Zach Lysobey,

Nota sulla versione: .admin-barnon viene più visualizzato in WordPress 4. Ora viene chiamato #wpadminbare non include il contenuto, pertanto non è possibile applicare quanto sopra alla versione 4+

— Raptor

È anche disponibile una versione SASS, insieme alla spiegazione delle risoluzioni mobili / desktop (siti Web responsive) e dell'approccio mobile-first: sitepoint.com/getting-sticky-headers-wordpress-admin-bar-behave

— Ministro

Come funzionerà una volta che l'utente sta scorrendo verso il basso? Quindi la barra di navigazione di wp sarà bloccata "quasi nella parte superiore dello schermo" che sembra piuttosto stupida

— FooBar,

1

Credo che, su dispositivi con larghezze minori, wpadminbar non sia posizionato fisso. Quindi, se si scorre il documento in uno smartphone, la barra di amministrazione seguirà lo scorrimento e non rimarrà nella parte superiore della finestra. Tenendo presente questo, perché non aggiungere un po 'di javascript nel piè di pagina del tema subito dopo la wp_head()chiamata. In questo modo possiamo scegliere come target la larghezza del dispositivo e se il documento ha o meno la barra di amministrazione. Quindi crea semplicemente alcune regole CSS e aggiungile alla testa del documento - come sotto!

<script>
( function(e) {
    var ab = document.getElementById( 'wpadminbar' );
    if ( typeof( ab ) === 'object' && window.innerWidth >= 610 ) {
        var abh = ab.offsetHeight || ab.clientHeight || ab.scrollHeight;
        var style = document.createElement( 'style' );
        style.id = 'adminbar_main_nav_controle_rules';
        document.getElementsByTagName( 'head' )[0].appendChild( style );
        var rules = document.createTextNode( 'body.admin-bar .main-navigation.fixed { margin-top: ' + abh + 'px !important; }' );
        style.appendChild( rules );
        console.debug( 'wpadmibar space is covered' );
    }
})();
</script>

Supponendo che il tuo nav abbia una classe 'main-navigation'e su scroll aggiungi un'altra classe chiamata 'fixed'ad essa. Cambia il CSS per indirizzare il tuo pannello di navigazione sostituendolo 'body.admin-bar .main-navigation.fixed'con qualunque cosa tu voglia indirizzare il tuo.

Può essere ulteriormente migliorato, ad esempio, controllando se la barra di amministrazione è fissa o meno, ma per ora, spero che sia di aiuto.

— Ezzat Ali
fonte

1

Prova questo per WordPress 4+. Controlla se la barra di amministrazione è presente e in tal caso sposta leggermente verso il basso l'intestazione fissa per compensare.

    //fix for admin bar
    if ($('#wpadminbar')[0])
        $('.site-header').css('top', '32px')

— yay dice Reinstate Monica
fonte

1

Si prega di modificare la risposta , e aggiungere una spiegazione: perché potrebbe che risolvere il problema?

— fuxia

Cambiando '.site-header' in 'body', questo ha funzionato per me.

— Kaji,

1

Funziona anche questo

body.logged-in > header {  
    margin-top: 32px;  
}

— AnDongNing
fonte

Prova ad aggiungere un po 'di spiegazione: questo consentirà all'OP e ai futuri utenti di imparare e capire cosa sta succedendo piuttosto che essere solo un luogo in cui le persone ottengono il loro codice scritto per loro. Grazie per aver risposto.

— Tony Djukic,

0

Ho appena usato questo CSS.

body.admin-bar #main-header  {
padding-top: 32px }

— Janete
fonte

-1

Prova questo, funziona benissimo

$(document).ready(function() {
    if ($('#wpadminbar')[0]) {
        $('header').css('top', '32px')
    }
});

— Andrii khmelovskyi
fonte

-2

dare la barra di navigazione superiore

.navbar-fixed-top {
    border-width: 0 0 1px;
    padding: 0;
    position: relative!
}

— Deepak Kumar
fonte