Neu Header in mobiler Ansicht ändern

[windpocke02]

Hallo,

ich habe folgendes Problem.
Ich habe im Header links mein Logo, dann zwei Produktgrafiken und rechts das Suchfeld.

In der mobilen Ansicht hätt ich gerne das Logo mittig und mit etwas Abstand darunter mittig das Suchfeld.
Das Ausblenden der zwei Produktgrafiken war kein Problem (mit "hidden-xs").

Ich habe nun für das Logo folgendes div vergeben:
<div class="col-sm-13 col-xs-16" id="logo">
Die col-sm-13 ist eine eigene Breite für die Normalansichten. Für die mobilansicht habe ich die div "col-xs-16" wie folgt definiert:
.col-xs-16 {
width: 100%;
float: left;
margin-bottom: 30px;
}

Das seltsame ist, dass sich in der mobilen Ansicht auf meinem Handy nichts ändert, aber auf dem normalen PC der untere Abstand von 30px eingefügt wird.

Den Block " shop-nav" habe ich mit "col-xs-12", d.h. auch 100% Breite definiert, d.h. der müsste ja unter das Logo rutschen.

Kann mir jemand helfen wo mein Denkfehler ist ?
Wie bekomme ich in der mobilen Ansicht ein bißchen Abstand zwischen das Logo und das Suchfeld ?

Danke und Grüße
Daniel

 

[vapish]

Das Thema ist zwar schon älter, leider kämpfe ich aktuell mit dem gleichen Problem.

Ich verwende den JTL Shop 5 Version 5.1.1 in Nutzung mit dem Jtl Header Plugin am Desktop sieht alles gut aus, nur in der mobilen Version ist das Suchfeld rechts oberhalb vom Logo und lässt sich nicht so einfach anwählen.
Das Anmelde- und der Warenkorb Icon sind auf der rechten Seite.

 

[MHillmann]

Hallo,

euer Logo ist natürlich sehr breit, da drückt es dann das Suchicon aus der Zeile raus. Als schnellen Hack könnte man soetwas probieren:

@media (max-width: 991.98px) {
    header .navbar-brand img {
       height: auto;
       max-width: 124px;
    }
}

Viele Grüße
Michael

 

[vapish]

Hallo,

euer Logo ist natürlich sehr breit, da drückt es dann das Suchicon aus der Zeile raus. Als schnellen Hack könnte man soetwas probieren:

@media (max-width: 991.98px) {
    header .navbar-brand img {
       height: auto;
       max-width: 124px;
    }
}

Viele Grüße
Michael

@Michael

Danke für deine schnelle Antwort, hat super geklappt und sieht PERFEKT aus!

 

[vapish]

Sorry, muss mich nochmals melden. Habe es unter /plugins/jtl_header/frontend/template/layout/header.tpl eingefügt.
Inzwischen geht es nicht mehr und der Eintrag ist weg. Nochmaliges einfügen in der header.tpl funktioniert nicht mehr.

Könntest du mir bitte sagen, wo ich es exakt einfügen muss?