Logo und Navigation auf gleicher Höhe (Browser)

Deutsch Diskussion Shopify Design
1

Hallo Ihr Lieben,

leider weiß ich nicht welches Theme ich verwende, da ich es umbenannt habe im Zuge von Varianten und Backups. Aber es ist ein kostenloses von Shopify.

Meine Frage:
Wie kann ich mein Logo und die Navigation (Kategorien) auf eine Höhe bringen? Ich würde in der Browseransicht so viel Platz sparen und denke auch das es schöner ist. Derzeit ist über der Navigation leider viel Platz. Könnt Ihr mir hier ein Theme oder einen Code empfehlen?

www.dickpig.de

Vielen Dank im Voraus
Dennis

Logo und Navi.JPG
Logo und Navi.JPG1676×935 144 KB

Logo und Navi 2.JPG
Logo und Navi 2.JPG1676×935 151 KB

2

Hey @DickPig

Wow ein super Shop! Was mir sehr gefällt ist das hier - sehr effektiv!

image.png

Du siehst auch das Theme im Theme editor ganz unten Links → Theme Aktionen.

Und das Menü eine Ebene nach oben rutschen kann in der Tat den Header etwas aufräumen da hast du recht. Nur muss man mit so etwas aufpassen denn das kann z. B. sich negative auf Handy auswirken. Und es wird eine ziemliche Programmierung verlangen denn das ganze Header Grid muss man umstrukturieren.

Wir haben ein paar Experten hier die das machen können gegen ein kleines Entgelt falls du diesen Weg nehmen möchtest. Falls das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail und unser Theme Team kann das anschauen. Es ist aber nicht gesagt, dass es unter unserer Design Richtlinie abgedeckt wird.

DIY

Da du ein ziemlich langes Menü hast, kann es in der Tat zu Problemen mit der Bildschirmbreite kommen wenn die Pixels einfach nicht mehr ausreichen, um alle Menüpunkte unterzubringen. Hier kannst du überlegen deine Menütitel zu kürzen, wie “Besondere Anlässe” zu “Jubiläum” o. ä.

Wenn du das doch DIY machen willst dann wäre eine Beispiel .css Code das folgende (Aber das folgende ist ohne Gewähr und bitte in einer Theme Kopie vorher testen!):

@include media-query($medium-up) {
 .site-header__upper  button.js-drawer-open-left {
     visibility:hidden;
 }    
}

Hier eine typische Struktur der Kopfzeile (die von der header.liquid in Sections gerendert wird):

<header class="site-header page-element is-moved-by-drawer" role="banner" ...>
  <div class="site-header__upper page-width">
    <div class="grid grid--table">
      <div class="grid__item small--one-quarter medium-up--hide">
           ...
      <div class="grid__item small--one-half medium-up--two-thirds small--text-center">
          ...
      <div class="grid__item small--one-quarter medium-up--one-third text-right">

Oder dieser Code hier (prüfe den Code Unterschied im Diffchecker)

<header class="site-header page-element is-moved-by-drawer" role="banner" ...>
  <div class="site-header__upper page-width">
    <div class="grid grid--table">
       <div class="grid__item small--one-quarter medium-up--one-quarter">
           ...
       <div class="grid__item small--one-half medium-up--one-half text-center">
           ...
       <div class="grid__item small--one-quarter medium-up--one-quarter text-right">
           ...

Dieses Codestück kann man auch an das Ende der theme.css einpflegen:

@include media-query($medium-up) {
 header button.js-drawer-open-left  {
     visibility:hidden;
 }    
}