Honeygrid: Abstand zwischen den Kategorien verändern (horizontal)

Thema wurde von Philipp_3, 29. August 2018 erstellt.

  1. Philipp_3
    Philipp_3 Neues Mitglied
    Registriert seit:
    29. August 2018
    Beiträge:
    1
    Danke erhalten:
    0
    Danke vergeben:
    2
    Ich habe mein Design bei unserem Onlineshop umgestellt auf das neue Honeygrid Template und jetzt muss ich dazu noch sehr viele Anpassungen vornehmen. Leider ist es mir nicht gelungen trotz intensiver Recherche herauszufinden wie ich den Abstand zwischen den einzelnen Kategorien-punkte vergrößern kann so das sie über den gesamten Kategorien-Balken gleichmäßig verteilt sind. Beim alten Template war dies problemlos Möglich.

    Und eine weitere Anpassung die ich gerne machen würde wäre die Schriftart von Großbuchstaben zu Kleinbuchstaben zu ändern. Ich habe zur besseren Verständnis noch ein Screenshot von den aktuellen Kategorien gemacht sowie einer vom alten Template.

    Ich freue mich auf Eure Ideen

    Besten Dank Philipp

    KategorieAbstand Alt.jpg
    KategorieAbstand.JPG
     
  2. Wilken (Gambio)
    Wilken (Gambio) Erfahrener Benutzer
    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.311
    Danke vergeben:
    2.208
    Das geht anders als früher. Erstmal musst du den Inhaltscontainer volle Breite geben, dann weist du den Elementen eine anteilige Breite zu. Hier mal händisch. Eine volle Breite sind 100%, bei 5 Elementen also 20% Breite für jedes. Kann man dann z.B. so machen:

    Code:
    .navbar-collapse .navbar-categories ul.navbar-nav {
        width: 100%;
        padding-left: 0px;
    }
    
    .navbar-categories > ul > li {
        width: 20%;
    }
    Vorsicht, dieser Weg geht kopfüber wenn sich die Anzahl der angezeigten Elemente ändert. Achte auch darauf wenn du CSS Media Queries im CSS drin hast, sprich Regeln für verschiedene Breiten, dann musst du das mehrfach einsetzen.

    Grossschrift entfernen ist auch eine simple CSS Regel. Die Grossschrift Regel wird dazu mit einer leeren Regel überschrieben.

    Code:
    .navbar-collapse .navbar-categories ul.navbar-nav > li > a {
        text-transform: inherit;
    }