Shopify Supply Theme - Wie zentriere ich die Objekte in der Navigationsleiste?

Also habe ich verändert dies bereits vom ersten Layout, aber das ist, wie mein nav bar momentan aussieht:Shopify Supply Theme - Wie zentriere ich die Objekte in der Navigationsleiste?

Nav Bar

Und das ist der Code, den ich verhunzt habe:

<nav class="nav-bar" role="navigation"> 
<div class="wrapper">  
    <div class="grid"> 
     <div class="grid-item large--one-half"> 
     {% include 'site-nav' %} 
     </div> 

     <div class="grid-item large--one-half text-right"> 
     <a href="/cart" class="header-cart-btn cart-toggle"> 
     <span class="icon icon-cart"></span> 
     {{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span> 
     </a> 
     </div> 
    </div> 
</div> 
</nav>

Also meine Frage ist: Gibt es einen weiteren Pfusch, den ich schreiben kann, um die Navigationstasten und die Warenkorb-Taste aufeinander zu stellen? Ich habe ein Spiel hatte um für ein paar Stunden und nicht überall bekam :(

Vielen Dank im Voraus

Laura :)

Quelle

2016-07-30 Laura Parsons

Es könnte einfacher sein, Ihnen zu helfen, wenn Sie Ihre CSS geben. : D ... Alternativ wäre das Bereitstellen eines JSFiddle-Beispiels nett. –

@ JefréN. Wie mache ich das? Tut mir leid, ich bin wirklich schlecht darin !! –

Was tun? Das Hinzufügen der CSS für die Navigationsleiste erfolgt auf die gleiche Weise, wie Sie das HTML hinzugefügt haben. JSFiddle wird verwendet, um mit CSS, HTML und Javascript für ein bestimmtes Projekt oder eine Idee herumzuspielen. Hier ist ein [Beispiel.] (Https://jsfiddle.net/welcome_me/z4tfyhdw/) JSFiddle Beispiele sind nützlich, wenn jemand versucht herauszufinden, was Ihr Problem ist. Zu diesem Zeitpunkt wäre das "css" wahrscheinlich das nützlichste. –

Ihr „grid-large - eine Hälfte“ Klassen bewirken, dass die Rasterelemente in zwei Hälften aufgeteilt werden. Wenn Sie beispielsweise "text-align: center" hinzufügen würden, würde Ihr Menü auf die Grenzen des übergeordneten div zentrieren. Sie müssen das Menü div 100% der Breite der Seite machen, und dann den Warenkorb-Link absolut wie folgt platzieren.

.cart { 
position: absolute; 
top: 7px; 
right: 3%; 
line-height: 50px;}

in Bezug auf den Links, um die gleiche Höhe zu machen, können Sie einen line-height alles hinzufügen, damit der Text in dieser definierten Höhe zentriert werden.

Ich habe eine schnelle Geige erstellt, um Ihnen bei der Beantwortung dieser Frage zu helfen.

https://jsfiddle.net/zsrjmLrd/

Quelle

2016-08-01 18:05:06

Shopify Supply Theme - Wie zentriere ich die Objekte in der Navigationsleiste?

Antwort

Verwandte Themen