# Navigation 2 spaltig? wie?

**URL:** https://forum.shopware.com/t/navigation-2-spaltig-wie/38531
**Category:** Themes & Design
**Created:** [26. Juli 2016 um 09:30 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531 "2016-07-26T09:30:02Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![DarKmaN\_AC](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@DarKmaN\_AC](https://forum.shopware.com/u/DarKmaN_AC)
#### Post date: [26. Juli 2016 um 09:30 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/1 "2016-07-26T09:30:02Z")

</div>

Hallo,

ich würde gerne die Kategorie Leiste 2 Spaltig haben. Kann mir bitte jemand sagen wie ich das anstelle?

Beispiel hier: [https://www.otto.de/](https://www.otto.de/)

Vielen Dank

GRüße

---

<div class="post-metadata">

### Author: ![bulz](https://avatars.discourse-cdn.com/v4/letter/b/a6a055/32.png) [@bulz](https://forum.shopware.com/u/bulz)
#### Post date: [26. Juli 2016 um 10:29 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/2 "2016-07-26T10:29:12Z")

</div>

Meinst du 2-spaltig oder 2-zeilig?!

---

<div class="post-metadata">

### Author: ![DarKmaN\_AC](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@DarKmaN\_AC](https://forum.shopware.com/u/DarKmaN_AC)
#### Post date: [26. Juli 2016 um 10:32 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/3 "2016-07-26T10:32:03Z")

</div>

ähh 2 zeilig. sorry. habe mich falsch ausgedrückt ☹

---

<div class="post-metadata">

### Author: ![grevo](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@grevo](https://forum.shopware.com/u/grevo)
#### Post date: [27. Juli 2016 um 12:25 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/4 "2016-07-27T12:25:24Z")

</div>

Dieses CSS sollte auch für mehrere Zeile funktionieren

```
@media screen and (min-width: 48em) {
.navigation-main .navigation--entry {
float:left;
}
}

```

&nbsp;

---

<div class="post-metadata">

### Author: ![Synonymous](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@Synonymous](https://forum.shopware.com/u/Synonymous)
#### Post date: [27. Juli 2016 um 12:35 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/5 "2016-07-27T12:35:27Z")

</div>

Wie soll das ganze dann im Responsive-Context aussehen? Dreizeilig werden?

---

<div class="post-metadata">

### Author: ![grevo](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@grevo](https://forum.shopware.com/u/grevo)
#### Post date: [27. Juli 2016 um 12:39 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/6 "2016-07-27T12:39:07Z")

</div>

> [@Synonymous schrieb:](https://forum.shopware.com/profile/24210/Synonymous "Synonymous")
> 
> Wie soll das ganze dann im Responsive-Context aussehen? Dreizeilig werden?

Ich würde mal schätzen Einspaltig mit vielen Zeilen 😉

---

<div class="post-metadata">

### Author: ![DarKmaN\_AC](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@DarKmaN\_AC](https://forum.shopware.com/u/DarKmaN_AC)
#### Post date: [27. Juli 2016 um 12:40 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/7 "2016-07-27T12:40:40Z")

</div>

Hi, danke für eure Antworten. So wie im Beispiel von [otto.de](http://otto.de)

&nbsp;

---

<div class="post-metadata">

### Author: ![Synonymous](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@Synonymous](https://forum.shopware.com/u/Synonymous)
#### Post date: [27. Juli 2016 um 12:42 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/8 "2016-07-27T12:42:26Z")

</div>

@grevo‍ Responisve != Mobiltelefon 🙂 Da gibt es noch einiges dazwischen…

---

<div class="post-metadata">

### Author: ![grevo](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@grevo](https://forum.shopware.com/u/grevo)
#### Post date: [27. Juli 2016 um 12:55 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/9 "2016-07-27T12:55:29Z")

</div>

Ich würde ja auch eher zu einer sinnvolleren Struktur raten. Aber wer’s wünscht kann es ruhig auch mehrzeilig umsetzen.

Meine obige simple CSS Lösung funktioniert aber nicht mit dem erweiterten Menü.

---

<div class="post-metadata">

### Author: ![DarKmaN\_AC](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@DarKmaN\_AC](https://forum.shopware.com/u/DarKmaN_AC)
#### Post date: [27. Juli 2016 um 13:01 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/10 "2016-07-27T13:01:19Z")

</div>

@grevo und genau das sollte so sein. Am besten die Navi 2 zeilig und mittig mit dem erweitertem Menue

---

<div class="post-metadata">

### Author: ![malzfons](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@malzfons](https://forum.shopware.com/u/malzfons)
#### Post date: [27. Juli 2016 um 13:12 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/11 "2016-07-27T13:12:00Z")

</div>

Das würde mich auch brennend interessieren. Aber in Verbindung mit dem erweiterten Menü. Also dass rechts bei mehreren Hauptkategorien nicht der Schiebepfeil erscheint, sondern dass es eine Zeile drunter weitergeht. Manche sehen den Schiebepfeil nicht gleich und denken da kommen keine weiteren Kategorien mehr.

Wir nutzen die Plugins “Erweitertes Menü”, “Sticky Menü” und “Teaserbilder für alle Kategorien” kombiniert.

Wenn man da was ändert, müsste man evtl. die anderen Plugins wie z.B. Sticky auch so machen oder?

&nbsp;

Viele Grüße

Matthias

&nbsp;

---

<div class="post-metadata">

### Author: ![Synonymous](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@Synonymous](https://forum.shopware.com/u/Synonymous)
#### Post date: [27. Juli 2016 um 13:36 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/12 "2016-07-27T13:36:48Z")

</div>

Ich würde für die reine Desktopnavigation ein eigenes Plugin schreiben, dass Dir die Navigation wie gewüscht baut. Dann diese mit CSS media-queries nur bei Desktops anzeigen und sonst das Standardmenü.

---

<div class="post-metadata">

### Author: ![grevo](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@grevo](https://forum.shopware.com/u/grevo)
#### Post date: [27. Juli 2016 um 13:57 UTC](https://forum.shopware.com/t/navigation-2-spaltig-wie/38531/13 "2016-07-27T13:57:10Z")

</div>

Damit das ganze mit dem Erweiterten Menü funktioniert einfach zu dem CSS Code welches die Mehrzeiligkeit macht

```
@media screen and (min-width: 48em) {
.navigation-main .navigation--entry {
float:left;
}
}

```

zusätzlich die Höhe des Erweiterten Menü mit jQuery aktualisieren

```
$(".navigation--entry").hover(function(){
var offset = $(this).position();
var newtop = offset.top + $(this).outerHeight(true);
$(".advanced-menu").css("top",newtop);
});

```

Allerdings finde ich die Lösung nicht ganz optimal, da dabei das erweiterte Menü die untenstehenden Menüeinträge verdeckt.
