Barra de administrador e problema de cabeçalho corrigido?

9

Eu denominei meu cabeçalho para ter uma posição superior fixa. Enquanto estiver logado no wordpress, a barra de navegação do administrador do wp cobre a seção superior do meu cabeçalho, tornando impossível o acesso à minha navegação superior. Gostaria que o wp admin nav empurre minha navegação superior abaixo para que ambos fiquem visíveis. Alguém conhece alguma solução para corrigir esse problema?

Um exemplo do meu problema pode ser encontrado em ... www.nickriversdesign.com/dev

usuario
fonte

Respostas:

8

no seu css, você pode tentar algo como: body.logged-in{margin-top:20px;}ou se isso não funcionar com outro código usando a .logged-inclasse

Zach Lysobey
fonte
6
Isso (incorretamente) afeta todos os usuários conectados. Considere a resposta de Brent.
22912 Chris
22

Tente adicionar isso ao seu arquivo CSS:

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

a body.admin-bardeclaração na frente garantirá que esses estilos sejam aplicados apenas quando a barra de administração estiver visível.

Brent
fonte
11
body.admin-bar é o seletor correto (e esta é a resposta correta). A resposta de Zach L afeta todos os usuários conectados, mas somente usuários com permissões de edição de conteúdo têm a barra de administrador visível e precisam que o cabeçalho seja movido pela página.
22912 Chris
interessante ... eu nunca tive uma configuração pessoal com nenhum usuário sem essas permissões. Eu imagino que é o mesmo que nas configurações do usuário, eles desabilitam a barra de administração.
Zach Lysobey
Nota da versão: .admin-barnão está mais aparecendo no WordPress 4. Agora é chamado #wpadminbare não quebra o conteúdo, portanto, o acima não pode ser aplicado à versão 4+
Raptor
Também está disponível uma versão SASS, juntamente com explicações para resoluções de celulares / desktops (sites responsivos) e abordagem para dispositivos móveis: sitepoint.com/getting-sticky-headers-wordpress-admin-bar-behave
Ministro
Como isso funcionará quando o usuário estiver rolando para baixo? Em seguida, a barra de navegação wp será preso "quase no topo da tela", que parece um pouco estúpido
FooBar
1

Eu acredito que, em dispositivos com larguras menores, o wpadminbar não está posicionado fixo. Portanto, se você rolar o documento em um smartphone, a barra de administrador seguirá a rolagem e não ficará na parte superior da janela. Com isso em mente, por que não adicionar javascript no rodapé do seu tema logo após a wp_head()chamada. Dessa forma, podemos segmentar a largura do dispositivo e se o documento possui ou não a barra de administração. Em seguida, basta fazer algumas regras CSS e anexá-lo ao cabeçalho do documento - como abaixo!

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

Supondo que sua navegação tenha uma classe 'main-navigation'e, no pergaminho, você adiciona outra classe nomeada 'fixed'a ela. Altere o CSS para direcionar seu painel de navegação, substituindo pelo que 'body.admin-bar .main-navigation.fixed'você deseja direcionar para o seu.

Pode ser melhorado, por exemplo, verificando se a barra de administração está fixa ou não, mas, por enquanto, espero que ajude.

Ezzat Ali
fonte
1

Tente isso para o WordPress 4+. Ele verifica se a barra de administração está presente e, se estiver, mova o cabeçalho fixo um pouco para baixo para compensar.

    //fix for admin bar
    if ($('#wpadminbar')[0])
        $('.site-header').css('top', '32px')
ykay diz Restabelecer Monica
fonte
11
Por favor edite sua resposta , e adicionar uma explicação: por que isso poderia resolver o problema?
fuxia
Alterar '.site-header' para 'body' fez com que isso funcionasse para mim.
Kaji
1

Isso funciona bem

body.logged-in > header {  
    margin-top: 32px;  
}  
AnDongNing
fonte
Tente adicionar um pouco de explicação - isso permitirá que o OP e os usuários futuros aprendam e entendam o que está acontecendo, em vez de serem apenas um lugar onde as pessoas recebem seu código escrito para eles. Obrigado por responder.
Tony Djukic
0

Eu apenas usei esse CSS.

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

Tente isso, funciona bem

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

dê a barra de navegação superior

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