FOCAL - Transparent Header nur auf Mobile Version nutzen.

Deutsch Diskussion Technische Fragen & Antworten
, , ,
1

Hallo,

ich benutze das Focal Design,

ich habe den Transparenten Header aktiviert, ich möchte den aber NUR auf der Mobile Version nutzen, heißt: im Desktop Modus soll der Header wie vorher angezeigt werden.

Welchen Code muss ich im “Header.Liquid” entfernen oder umändern, ich bitte um Hilfe, vielen dank.

Die Mobile Version soll den Transparent Header Modus haben.

Der Desktop soll den normalen Header verwenden.

Ich bedanke mich

Mit freundlichen Grüßen

2

Scheint hiermit zu funzen:

@media screen and (min-width: 724px) {
    .header {
        background: rgba(40, 40, 40, 1) !important; 
    }
}

@media screen and (max-width: 723px) {
    .header {
        background: rgba(40, 40, 40, 0) !important; 
    }
}

Einfach max- und minwidth px anpassen nach Bedarf…

3

Ich denke so lässt sich nicht lösen, weil nicht nur der Header Transparent wird, sondern auch das Weiße Logo anstatt das Schwarze erscheint, die Schriftfarbe umgekehrt wird. Es muss schon im Liquid oder sonst wo abgeändert werden. Damit der ganze Transparent Header Code nur in der Mobile Version angezeigt wird

bitte um Hilfe

4

Da musst du einiges in Liquid in der header.liquid ändern. Getrennt mobile/Desktop eincoden, damit dies korrekt dargestellt wird. Versuche es selbst oder suche dir einen Entwickler deines Vertrauens.