Neu Evo Menü Mobil

[3jojojo]

Hallo Leute und einen guten Morgen

Ich habe mir gerade auf dem Iphone mal das evo Theme angeschaut. Meiner Meinung nach ist es dabei nicht optimal das das sich die Menüleiste mit den Kategorien im Header mit verschiebt. Hat jemand eine gute Idee wie man die Menüleiste am einfachsten als oberste Leiste immer anzeigt?

So kann der Kunde jederzeit wieder in den Kategorien navigieren.

 

[3jojojo]

ich habe jetzt mal zu testzwecken die hidden-xs aus dem Header genommen was auch hilft. Allerdings wird dann eben das klassische Desktop Menu verwendet. Jemand nen Tipp wie man mobil menü im Theme oben halten kann? reicht es nicht eine Klasse im Header fixed zu setzen???

 

[css-umsetzung]

Ich glaube nuemand versteht dein Problem.
Ich wusste auf die schnelle auch die URL nicht und stehe wie vermutlich alle anderen auf dem schlauch.

 

[3jojojo]

ich habe auf dem Bild mal den Bereich markiert den ich meine. Auf dem Evo läuft das Header Menu bei Mobilgeräten mit. Auf dem Desktop bleibt die Leiste fixiert. Der Kunde kann also jederzeit ins Menü oder den Warenkorb kommen. Mobil ist das nicht möglich.

 

[css-umsetzung]

Aha, das ist ja ganz was anderes als das was ich dachte

also so wie ich das hier zum Beispiel gemacht habe
http://bit.ly/2FasKTp

 

[3jojojo]

ja genau so nur eben beim evo template. Wie hast du das gemacht??

 

[css-umsetzung]

Das ist auch nur das Evo was du da siehst nur eben mit einigen header, css und JavaScript Anpassungen.
Da gibt es leider keine "schreib mal das in Zeile x" Möglichkeit, ich hab da an einigen Stellen geschraubt, auch wegen der Suchfunktion.

 

[3jojojo]

so

Das ist auch nur das Evo was du da siehst nur eben mit einigen header, css und JavaScript Anpassungen.
Da gibt es leider keine "schreib mal das in Zeile x" Möglichkeit, ich hab da an einigen Stellen geschraubt, auch wegen der Suchfunktion.

so genau will ich es ja auch überhaupt nicht. eigentlich will ich nur das die leiste mit dem Menübutton oben bleibt. Thats it. Welche Klasse hast du im CSS verändert?

 

[css-umsetzung]

Ich sage ja klasse reicht nicht, du könntest jetzt das ding mit position:fixed festnageln, aber du weißt ja nie wie goss das padding vom content dann sein muss damit der obere Bereich noch erreichbar ist.

nehmen wir mal an du sagst du hast das orig. Evo

header {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    border-bottom: 1px solid #dedede;
}

dann müsstest du entscheiden wie groß dein padding vom content sein soll, bei mir z.b.

#content-wrapper {
   padding-top:140px;
}

aber das ist eben abhängig von dem einzelnen header und muss je nach Bildschirmbreite anders sein.
Das ganze muss dann natürlich in media-querys eingebettet sein damit es je Auflösung reagiert.

Alles viel gefummel und eben nicht bei jedem gleich.

 

[_simone_]

Wir haben uns das auch machen lassen. Für jemand, der sich auskennt sollte das nicht mehr als eine Stunde dauern.

 

[css-umsetzung]

@_simone_ mach mal hier nicht mein Geschäftsmodell kaputt , wie lange das dauert ist wirklich abhängig vom vorhandenen und ne Stunde finde ich etwas wenig wen ich alles durchteste um sicher zu sein das es dann überall geht.

 

[_simone_]

@_simone_ mach mal hier nicht mein Geschäftsmodell kaputt , wie lange das dauert ist wirklich abhängig vom vorhandenen und ne Stunde finde ich etwas wenig wen ich alles durchteste um sicher zu sein das es dann überall geht.

Stimmt, das debugging hab ich übernommen und der Progger musste nochmal ran.
...und 100% stimmig ist es immer noch nicht. :/ (kannst ja mal schauen)

 

[FPrüfer]

Als reine JS-Lösung...

function fixHeadLine() {
    var $evo_nav_wrapper = $('#evo-nav-wrapper');
    if (ResponsiveBootstrapToolkit.current() === 'xs') {
        $evo_nav_wrapper.css({
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'width': '100%',
            'z-index': '50'
        });
        $('#content-wrapper').css('margin-top', $evo_nav_wrapper.height());
    } else {
        $evo_nav_wrapper.removeAttr('style');
        $('#content-wrapper').css('margin-top', 0);
    }
}
$(document).ready(function () {
    fixHeadLine();
});
$(window).resize(function () {
    fixHeadLine();
});

 

[css-umsetzung]

Ja auch das ist eine sehr gute variante, ich würde das resize event nur verzögern, da es beim kleiner schieben sonst ständig neu rechnet

 

[3jojojo]

Als reine JS-Lösung...

function fixHeadLine() {
    var $evo_nav_wrapper = $('#evo-nav-wrapper');
    if (ResponsiveBootstrapToolkit.current() === 'xs') {
        $evo_nav_wrapper.css({
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'width': '100%',
            'z-index': '50'
        });
        $('#content-wrapper').css('margin-top', $evo_nav_wrapper.height());
    } else {
        $evo_nav_wrapper.removeAttr('style');
        $('#content-wrapper').css('margin-top', 0);
    }
}
$(document).ready(function () {
    fixHeadLine();
});
$(window).resize(function () {
    fixHeadLine();
});

klingt auch gut werde ich heute abend mal probieren. Bis jetzt habe ich es erstmal komplett mit CSS gelöst

.fixed-navbar {
position: fixed!important;
z-index: 999;
top: 0px;
left: 0px;
right: 0px;
}
#content-wrapper {
   padding-top:120px;
}

 

[3jojojo]

Ja auch das ist eine sehr gute variante, ich würde das resize event nur verzögern, da es beim kleiner schieben sonst ständig neu rechnet

Danke dir auch noch für den CSS Tipp ein bisschen fummeln muß man zwar echt aber das resultat ist dann echt cool.

 

[3jojojo]

Aha, das ist ja ganz was anderes als das was ich dachte

also so wie ich das hier zum Beispiel gemacht habe
http://bit.ly/2FasKTp

Der Shop ist im übrigen wirklich gut. Hast du den gemacht??? Ich hätte eine Frage dazu!

https://www.shirtminister.com/de-filme-serien-herren__T-Shirt-Farbe-Tuerkis

Da wird bei der Farbauswahl (Ausgewähltes Merkmal türkis) auch das Artikelbild der Shirts in Türkis (Kinderartikel) verwendet. Wie hast du das geschafft?

 

[css-umsetzung]

Ja das habe ich gemacht, dazu war viel Arbeit erforderlich das wir zum einen in Listen nicht nur die Väter zeigen können sondern selbst bestimmen welches Kind erscheinen soll um dann auch direkt darauf zu verlinken.
Das was du da siehst ist auch so nicht über Plugins lösbar, da musste an mehren Stellen vom Template geschraubt werden. Es war hier auch erforderlich das wir eine klare Struktur der Farben und des Geschlechtes haben so das wir das dann einigermaßen automatisieren konnten.

 

[3jojojo]

Ja das habe ich gemacht, dazu war viel Arbeit erforderlich das wir zum einen in Listen nicht nur die Väter zeigen können sondern selbst bestimmen welches Kind erscheinen soll um dann auch direkt darauf zu verlinken.
Das was du da siehst ist auch so nicht über Plugins lösbar, da musste an mehren Stellen vom Template geschraubt werden. Es war hier auch erforderlich das wir eine klare Struktur der Farben und des Geschlechtes haben so das wir das dann einigermaßen automatisieren konnten.

Wäre es damit auch möglich alle Kinder Artikel eines Vaters anzuzeigen??? Beispiel wäre das von einem T-Shirt das T-Shirt in jeder Farbe angezeigt wird aber nur in jeweils 1 mal (nicht in jeder Größe). Bisher wird ja immer nur eine Farbe als Hauptartikel angezeigt.

 

[css-umsetzung]

Ja das geht, wenn ich es noch richtig im Kopf habe hat jeder Vater im Listing auch alle seine Kinder dabei (ist jetzt aber so aus dem Gedächtnis) aber auch wenn es nicht so wäre würde das gehen.
Aber immer dran denken, in diesem Shop sind es seine eigenen Shirts und seine von uns klar festgelegte Artikelnummer Struktur, über ein Funktionsattribut wurde dann im Vater festgelegt welches Kind gezeigt wurde.
und er hat ganz klar 12 oder mehr festgelegte Farben, habe ich 100 verschiedene Farbwerte wird es sich irgendwann negativ auf die Performance auswirken.

Wenn du jetzt Nike oder hast kann es sein das man sich nicht an Artikelnummern orientieren kann, dann muss was eigenes her das man dann in der HAN oder wo es passt hinterlegt.