web-dev-qa-db-ja.com

Twenty Seventeenテーマナビゲーションバーの位置を変更する方法？

私は27の子テーマを作っています、そして私はナビゲーションバーを一番上に置いて固定しました。もともと、ナビゲーションバーがあった場所を通過した後にsite-navigation-fixedを追加していたため、absoluteを維持してからfixedになることに問題がありました。

site-navigation-fixedが定義されている場所を見つけることができたことが主な原因です。これを解決するために、ほとんどのルールを.navigation-topクラスにコピーして貼り付けました。これは基本的に奇妙な "ジャンプ"が存在しないように見えるようにしました。

ナビゲーションバーが黒に変わりました。問題は、ログオフ時にWebサイトを表示したときに、ナビゲーションバーの上に管理バーがあった場所に空のスペースがあることです。これがabsoluteで奇妙なジャンプをしたときはそうではありませんでした。

私が使用しているCSS：

@media (min-width: 1200px) {
    .navigation-top {
        background-color: transparent;
        border: none;
        width: 100%;
        height: 120px;
        top: 32px;
        font-size: 130%;
        bottom: auto;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 7;
    }
    .navigation-top .wrap {
        max-width: 100%;
    }

    .navbar-transition {
        background-color: black !important;
        transition: background-color 1s ease-in-out;
        -moz-transition: background-color 1s ease-in-out;
        -webkit-transition: background-color 1s ease-in-out;
        -o-transition: background-color 1s ease-in-out;
    }

ナビゲーションバーの位置（Twenty Seventeenテーマの位置）を適切に変更して、ヘッダー画像の上に配置して固定できるようにするにはどうすればよいですか。

menuscsstheme-twenty-seventeen
2
Walid Mujahid وليد مجاهد

.navigation-topクラスを更新してtop: 0;を使用するようにします。そうすれば、匿名ユーザーにはギャップがありません。

.navigation-top {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 120px;
    top: 0;
    font-size: 130%;
    bottom: auto;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 7;
}

次に、認証されたユーザーのために管理バーのアカウントを追加するスタイルを追加します。

.admin-bar .navigation-top{
  top: 32px;
}

管理バーが表示されている場合、WordPressコアはadmin-barクラスにbodyタグを追加するので、このクラスを自分で追加する必要はありません。

2
Andrew