Storefront sticky header

Question

Ich versuche, eine klebrige Header für meine WordPress-Website (www.carryoneverything.com) zu erstellen. Ich habe das neueste Storefront-Theme installiert, aber ich kann mein Logo, die Navigation, den Warenkorb und die Suche nicht in derselben Zeile sehen. Ich denke, es liegt daran, dass sie alle in getrennten divs sind?

Ich möchte meine Header wie https://www.hollisterco.com/shop/us aussehen, wenn es fertig ist.

Zusätzlich deckt der Admin-Bar die klebrige Header und die klebrigen Kopf ccovers oben bis der Körper, wenn ich tun:

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

Kann ich dies in CSS lösen oder muss ich Javascript verwenden?

Answer 1

Sie können das definitiv mit CSS lösen. Der übergeordnete Container, der die Elemente enthält, die Sie ausrichten möchten, kann Flex-Attribute hinzugefügt haben, so dass es die Dinge für Sie ausrichten wird. Lesen Sie mehr über flex hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Wenn Dinge vertuscht werden, indem ein div eine feste Position geben, dann ist es höchstwahrscheinlich ein Z-Index-Problem. Auf diese Weise können Sie divs übereinander legen, wobei bestimmte divs oben und andere unten bleiben.

Beispiel: z-index:1 wird von z-index:2 abgedeckt werden. Lesen Sie mehr über z-index hier: 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

Dies ist ein Wordpress-Ausgabe ist. Wir können es nicht einfach lösen, indem wir Ihnen einen Code geben. Wir müssen Zugriff auf die Website haben. Das Theme bietet möglicherweise auch einige Bearbeitungsmöglichkeiten (Designoptionen) für Sie. Es ist eigentlich ein kleines Problem, BTW.