Kategorie (main-Navigation) bei einigen Kategorien in 2 Reinen anzeigen!

Hallo ihr Lieben,

ich hab eine Frage bezüglich des Navigationsbereichs der Kategorien.

Ich habe Aktuell 12 Kategorien, diese passen aber nicht alle im Kopfbereich, es wird mir stattdessen wie beim Slider pfeile angezeigt. Dies möchte ich gerne vermeiden und die Schrift verkleinern hab ich schon versucht und müsste auf 10 gesetzt werden, was wiederum sehr klein ist.

Würde gerne diese Kategorien die nicht mehr in der ersten Zeile passen durch ein Umbruch als Zweite Zeile anzeigen lassen also untereinander.

 

Geht das, wenn ja wie? muss dazu sagen, bin kein Programmierer aber bin nicht unfähig, arbeite mit FillZilla und Visual Studio wo ich die Datei (main-navidation- Datei) bearbeiten kann.

 

Hier mal mein Code: (Aktuell)

.navigation-main {
    background: #fff;
    display: none;
}

@media screen and (min-width: @tabletViewportWidth) {
    .navigation-main {
        border-bottom: 1px solid @brand-primary;
        display: block;
        position: relative;

        .navigation–list {
            .clearfix();
            .unitize-padding(0, 10);
            margin: 0;
            position: relative;
            white-space: nowrap;
        }

        .navigation–entry {
            display: inline-block;
            -ms-touch-action: none;
        }

        .navigation–link {
            .transition(none 0);
            .unitize-padding(8, 14);
            .unitize(font-size, 100%);
            .border-radius-multi(3px, 3px, 0, 0);
            margin: 0;
            display: block;
            cursor: pointer;
            color: @text-color;

            &:hover { color: @brand-primary; }
        }

        .is–active .navigation–link {
            .primary-gradient();
            font-weight: 600;
            color: #fff;

            &:hover { color: #fff; }
        }
    }
}

@media screen and (min-width: @desktopViewportWidth) {
    .navigation-main {
        .navigation–list {
            padding: 0;
        }
    }

Die Mainnavigation ist eine Aufzählungsliste und wird durch display: inline-block; horizontal dargestellt. Damit müsstest du ein bisschen spielen.