CSS Hilfe für Navbar und Topbar gesucht

Thema wurde von Anonymous, 25. Juli 2017 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Februar 2016
    Beiträge:
    136
    Danke erhalten:
    18
    Danke vergeben:
    82
    Hi,
    ich hab mal wieder ein bisschen am Design meines Shops gespielt und nun noch 3 Sorgen.

    Sorge 1: Ich hätte gerne die Links "Startseite" und "Blog" aus der Topbar (ganz oben) auf die linke Seite, der Rest soll aber rechts bleiben und zusätzlich hätte ich den Warenkorb auch oben rechts angezeigt. Da die Leiste fixiert ist und immer sichtbar bleibt.

    Sorge 2: In der Kategorieleiste habe ich den Link "Blog" nach ganz rechts geschoben und mit Hintergrundfarbe hinterlegt. Nun stehen aber noch die Linien rechts über. (zur Ansicht ein Screenshot) Dieses Bereich hätte ich gerne zusätzlich mit Farbe gefüllt oder alternativ dieses Bereich gekürzt.

    Sorge 3: Der untere Rahmen der Kategorierleiste hüpft etwas bis die Seite fertig geladen ist.

    Für alle 3 Sorgen habe ich nun schon etliche Einstellungen und Änderungen durch, aber ich finde einfach keine Lösung.
    Habt ihr vielleicht Ideen für mich?

    NavBarShop.jpg
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    zu 2:
    Code:
    .navbar-collapse .navbar-categories ul.navbar-nav li.topmenu-content:nth-child(5) {
         margin-right: 0px;
    }
    dann rutsch der Blog nach rechts und der Rand ist weg.

    zu 1: wenn nur einzelne Seiten nach links sollen, muss das in der Datei festgelegt werden.
    Den Warenkorb kannst Du da nciht so einfach rein bekommen. Der müsste auch in die Datei, nur ob da die Funktion zur Verfügung steht ist fraglich.
    ein einfachen nach oben schieben per css könnte man testen, wenn der Warenkorb Sticky-Werte hätte.

    Wenn irgendetwas hüpft passen die höhen meist nicht zusammen. Es wird das kleinere Feld geladen und dann das Höhere.
    Du müsstest einmal schauen, ob Du irgendwo ein Pixel unterschied hast.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Februar 2016
    Beiträge:
    136
    Danke erhalten:
    18
    Danke vergeben:
    82
    Danke @barbara für deinen Einsatz.

    2. konnte ich ja dann zack lösen.
    1. nehme ich dann einfach so wie es ist, an die Dateien trau ich ich nicht ran - da hab ich keine Ahnung von. ;)

    zu 3. Ich hab schon so viel probiert. Anfangs hüpfte die komplette Leiste, jetzt immerhin nur noch der untere Rahmen.
    Egal wie ich den Wert im SE3 einstelle, es hüpft.
    ich vermute fast das es an dieser "auto" Einstellung liegt und dem Overflow. Ich selbst habe da kein CSS hinterlegt.
    Das Problem trat erst auf als ich "border-top" und "border-bottom" eingegeben habe.
    Der rechnet ja automatisch immer 4px für den Rand drauf. Ich hab also eine Gesamthöhe von 39px. Gebe ich die im SE3 an, macht er dann 43px draus und so weiter.

    Bildschirmfoto 2017-07-25 um 19.35.59.png
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Du hast eine Gesamthöhe von 44px
    eine line-height von 18px und 2x padding mit je 10px macht aber nur 38px
    Vielleicht hilft es die Padding-Werte auf 12px zu erhöhen
    versuche dazu mal bitte den Code:
    Code:
    @media (min-width: 768px){
    .navbar-collapse .navbar-categories ul.navbar-nav > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }}
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Februar 2016
    Beiträge:
    136
    Danke erhalten:
    18
    Danke vergeben:
    82
    Da tut sich leider nichts. Wenn ich mit der Maus über die ersten 3 Kategorien gehe bewegen die sich. Ob es damit was zu tun hat?
     
  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.611
    Das die sich bewegen liegt an diesem Code:
    Code:
    @media (min-width: 768px){
    .navbar-collapse .navbar-categories ul.navbar-nav > li.open > a {
        border-top: 2px solid #fff;
        padding-top: 8px;
    }}
    dadurch rutschen die um 2 px nach oben
    Du hast hier aber auch noch mal eine Linie oben von 2 px
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Februar 2016
    Beiträge:
    136
    Danke erhalten:
    18
    Danke vergeben:
    82
    #7 Anonymous, 27. Juli 2017
    Zuletzt bearbeitet: 27. Juli 2017
    Guten Morgen,
    ich bin immer wieder überrascht wo du die ganzen Codes herziehst. Ich schau immer nur mit dem Firefox, da finde ich den gar nicht.
    Nochmal großes Danke für deine unendliche Geduld. :)

    Edit:
    da ich nun schon so viel Zeit mit Suchen verschwendet habe und einfach kein optimales Ergebnis finden konnte habe ich mich mit diesen Code beholfen
    Code:
    .navbar-default.navbar-categories {
        height: 44px !important;
    }
    Nun ist Schluss mit der Hüpferei.