店頭のスティッキーヘッダー

Question

私のワードプレスサイト（www.carryoneverything.com）のスティッキーヘッダーを作成しようとしています。最新のStorefrontテーマがインストールされていますが、ロゴ、ナビゲーション、カート、検索をすべて同じ行に表示できないようです。彼らはすべて別々の部署にいるからだと思いますか？

私のヘッダーはhttps://www.hollisterco.com/shop/usのように見えるようにします。

#masthead { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

私はCSSでこれを解決したり、私はJavaScriptを使用する必要が行うことができます。

はさらに、管理バーはスティッキーヘッダーとスティッキーヘッダーccoversアップ私は身体を覆い隠し？

Answer 1

これはCSSで確実に解決できます。整列させたい項目を保持する親コンテナにはflex属性を追加することができます。フレックスの詳細はこちらhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

divに固定された位置を与えることで物事が覆い隠されているときは、おそらくZインデックスの問題です。これによりdivをレイヤー化し、あるdivを上に、他のdivを下に保ちます。

例： z-index:1は、z-index:2でカバーされます。ここでZインデックスについて詳しく読む：https://www.w3schools.com/cssref/pr_pos_z-index.asp

.parent{ 
 
    display:flex; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
} 
 

 
.child{ 
 
    width:20%; 
 
    background-color:black; 
 
    color:white; 
 
    text-align:center; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    1 
 
    </div><!-- child --> 
 
    <div class="child"> 
 
    2 
 
    </div><!-- child --> 
 
    <div class="child"> 
 
    3 
 
    </div><!-- child --> 
 
</div><!-- parent -->

Answer 2

これはワードプレスの問題です。私たちはあなたにコードを与えるだけでは解決できません。 サイトにアクセスする必要があります。 テーマはあなたのためにいくつかの編集（テーマオプション）を提供するかもしれません。 これは実際には少し問題ですが、BTW。