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

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

私の問題の例は... www.nickriversdesign.com/devにあります

あなたのCSSであなたは次のようなことを試すことができます：body.logged-in{margin-top:20px;}またはこれが.logged-inクラスを使用する他のいくつかのコードで機能しない場合

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

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

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

幅が狭いデバイスでは、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'にそれに名前が付けられた別のクラスを追加します。CSSを変更して、ナビゲーションパネルをターゲットにするように変更します'body.admin-bar .main-navigation.fixed'。

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

WordPress 4+でこれを試してください。管理バーが存在するかどうかを確認し、存在する場合は修正するために固定ヘッダーを少し下に移動します。

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

これも機能します

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

私はこのCSSを使用しました。

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

これを試してください、それはうまくいきます

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

トップnavbarを与える

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