web-dev-qa-db-ja.com

管理バーと修正されたヘッダーの問題

頭の位置を固定するようにヘッダーのスタイルを設定しました。ワードプレスにログインしている間、wp admin navバーが私のヘッダのトップセクションを覆い、私のトップナビゲーションにアクセスすることを不可能にします。両方とも表示されるように、wp admin navに下のナビゲーションをプッシュしてもらいたいのですが。誰もがこの問題を解決するための解決策を知っていますか？

私の問題の例は... www.nickriversdesign.com/dev で見つけることができます。

headersadmin-bar
8
Nick

body.logged-in{margin-top:20px;}やこれが.logged-inクラスを使って他のコードを動かさないなら、あなたのcssであなたは何かを試すことができます

8
Zach Lysobey

これをCSSファイルに追加してみてください。

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

前面のbody.admin-bar宣言は、これらのスタイルが管理バーが表示されているときにのみ適用されることを確認します。

21
Brent

WordPress 4以降で試してください。管理バーが存在するかどうかを確認し、存在する場合は固定ヘッダーを少し下げて補正します。

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

私は、幅が狭いデバイスでは、wpadminbarは固定されていません。そのため、スマートフォンで文書をスクロールしても、管理バーはそのスクロールに従って移動し、ウィンドウの上部には表示されません。これを念頭に置いて、wp_head()呼び出しの直後にテーマのフッターにJavaScriptを追加しないでください。このようにして、デバイスの幅とドキュメントに管理バーがあるかどうかをターゲットにすることができます。それから単純にいくつかのCSSルールを作り、それをドキュメントの先頭に追加します - 下記のように！

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

ナビゲーションに'main-navigation'というクラスがあり、スクロール時に'fixed'という名前の別のクラスを追加するとします。 'body.admin-bar .main-navigation.fixed'を自分のターゲットにする方法に置き換えて、ナビゲーションパネルをターゲットにするようにCSSを変更します。

管理バーが固定されているかどうかを確認するなど、さらに改善することができますが、今のところ、それが役立つことを願っています。

1
Ezzat Ali