gelöst Topmenu-Corner

bau es doch im Content-Manager unter Header-Customer ein, da kann du das besser gestalten, es wird auch besser gesehen,
hast doch Platz zwischen Suchfeld und Warenkorb.
Nachtrag: Bedenke noch, Deine Variante sieht dann in der Tablet-Ansicht nicht gut aus.

 

Schaut sehr gut aus, prüfe aber mal die Tablet-Größe, da sollten die Nav-Bar-Texte etwas zusammenrutschen

 

Ich war mal eben so frei und hab ein wenig in der Browserkonsole gebastelt. So sieht es gerade aus:


Folgendes brauchst du dafür im HTML. Dafür einfach die box_top_navigation-USERMOD.html anpassen, die du schon erstellt hast:

HTML:

<div class="navbar-topbar">
       <nav data-gambio-widget="menu link_crypter" data-menu-switch-element-position="false" data-menu-events='{literal}{"desktop": ["click"], "mobile": ["click"]}{/literal}' data-menu-ignore-class="dropdown-menu">
           <ul class="nav navbar-nav navbar-right">
               [...]
           </ul>
       </nav>
   </div>

wird zu

HTML:

<div class="navbar-topbar">
        <nav data-gambio-widget="menu link_crypter" data-menu-switch-element-position="false" data-menu-events='{literal}{"desktop": ["click"], "mobile": ["click"]}{/literal}' data-menu-ignore-class="dropdown-menu">
            <div class="col-sm-7 hidden-xs top-information-container">
                <div class="col-sm-4 top-information">Kein Mindestbestellwert</div>
                <div class="col-sm-4 top-information">Versandkostenfrei ab 75 €</div>
                <div class="col-sm-4 top-information">SSL-geschützt einkaufen</div>
            </div>

            <ul class="nav navbar-nav navbar-right">
                  [...]
            </ul>
        </nav>
    </div>

Und dann brauchst du noch folgendes CSS, was du als Eigenes CSS im StyleEdit3 hinzufügen kannst:

Code:

.navbar-topbar {
   background-color: #b7b7b7;
   
   .top-information-container {
      padding: 0;
      
      .top-information {
         line-height: 30px;
         color: #fff;
         font-size: 12px;
      }
   }
}

 

Ok, da muss noch ein klein bisschen angepasst werden:

Code:

.navbar-topbar {
    background-color: #B7B7B7;
 
    .top-information-container {
        padding: 0;
     
        @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
            width: 58%;
        }
     
        .top-information {
            line-height: 30px;
            color:       #FFFFFF;
            font-size:   12px;
         
            @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
                font-size: 10px;
                padding:   0;
             
                &.first {
                    padding-left: 15px;
                }
            }
        }
    }
}

Und im HTML fehlt noch folgendes:

HTML:

<div class="navbar-topbar">
        <nav data-gambio-widget="menu link_crypter" data-menu-switch-element-position="false" data-menu-events='{literal}{"desktop": ["click"], "mobile": ["click"]}{/literal}' data-menu-ignore-class="dropdown-menu">
            <div class="col-sm-7 hidden-xs top-information-container">
                <div class="col-sm-4 top-information first">Kein Mindestbestellwert</div>
                <div class="col-sm-4 top-information">Versandkostenfrei ab 75 €</div>
                <div class="col-sm-4 top-information">SSL-geschützt einkaufen</div>
            </div>

            <ul class="nav navbar-nav navbar-right">
                  [...]
            </ul>
        </nav>
    </div>

So sah das dann gut aus bei mir

 

Hallo Sabine,

mir gefällt deine Seite und der Header ist genau so, wie ich ihn auch gerne hätte.

Leider bleibt mein Logo klein und auch der Abstand zur Navigationsleiste darunter ist viel zu eng.

Die Anregung von Barbara zu deiner hiesigenFragestellung habe ich sofort aufgegriffen - hat prima funktioniert. Allerdings fehlt mir die Zugriffsmöglichkeit auf die "echte" main.css-Datei.

Lässt du mich an deiner Lösungsfindung teilnehmen?

 

Man macht keine Änderungen an den originalen Dateien, da die beim nächsten Update weg wären.
Deshalb gibt es die Möglichkeit der eigenen css-Datei oder der eigenen Codes im Style Editor.
Bei Dir stimmt aber schlicht die Höhe des Headers nciht.
Versuche einmal im Style Editor die Höhe für Logo, Warenkorb und Freien Text gleich zu machen, vielleicht hilft das schon.

 

Hallo ihr beiden, ich bedanke mich, werde mich demnächst dranmachen. Hatte allerdings übersehen, dass bereits die gesuchten Tipps weiter oben standen (da ich bei Seite 1 dieses Threads hängen geblieben war).

 

Ich komme beim Versuch das ebenso zu gestallten nicht weiter. Ich denke ich habe die Dateien so wie beschrieben hochgeladen aber mein Testshop sieht jetzt total auseinander gesprengt aus. Weiss jemand von euch woran das liegen könnte?

 

Ich rate mal:
da wurde ein geöffnete "{" nciht geschlossen.
Dadurch verschiebt sich dann alles, was darunter kommt.

 

Hallo Barbara, ist das den möglich in diesem Falle? Ich habe niichts verändert an HTML und CSS von Torben!#27

 

Du brauchst nur beim Kopieren eine Klammer übersehen haben.
Und dann ist bei Torben [...], ich denke statt dessen muss der normale, vorhandene Code bleiben.

 

Das css von Torben funktioniert auch nicht bei mir im Testshop
z.B.: @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) will gar nicht !!
habe es neu geschrieben auf "alte" Weise, dann klappt das.
z.B.: @media (min-width: 768px) and (max-width: 991px) ....

Nachtrag: gibt man das css von Torben über StyleEdit3 unter Eigene css ein, funktioniert das.
Aber ich gebe meine css immer unter Honeygrid/usermod/css ein und da funktioniert das css von Torben nicht, deshalb musste ich das komplett neu schreiben.

 

Hallo @ postel . Habe beide Varianten ausprobiert, konnte aber keine Veränderung feststellen.
@ barbara,

Ich denke daran hat es gelegen. Ich habe den Originalcode nach (
<div class="col-sm-4 top-information">SSL-geschützt einkaufen</div>
</div>) eingegeben und jetzt ist alles auf einer Reihe.
@ alle: Wie verändere ich die Schriftfarbe? Sie ist momentan weiss und schlecht zu erkennen.

 

Ich habe das selbst lösen können! Für jene die das vielleicht interessiert: Im eigenen CSS findet sich folgendes:
.top-information {
line-height: 30px;
color: #FFFFFF;
font-size: 12px;
Color kann man nach eigenen Wünschen ändern. Hatte das zuvor schon versucht gehabt, aber das hatte nicht auf Anhieb geklappt. Jetzt aber schon.
@postel : Ich finde deine Seite ist sehr gut gelungen. Mein Kompliment dazu.

 

Im Honeygrid/usermod/css Verzeichnis steht kein SCSS zur Verfügung weshalb da auch meine Variante nicht funktionieren kann. Deshalb hatte ich extra "Eigenes CSS" im StyleEdit 3 als Ort für Anpassungen angegeben, weil dort alle Variablen zur Verfügung stehen.