© Bakual

variable Headerhöhe und Logogröße

Mehr
1 Jahr 10 Monate her - 1 Jahr 10 Monate her #5295 von Jochen Ebert
Hallo,
ich suche mir gersade einen Wolf im Allrounder nach
- variabel Höhe für den Header in Abhängigkeit zum header-hintergrund (mobile Ansicht)
- variable Größe des Logobild bei der mobilen Ansicht

Die Schriftgröße konnte ich per clamp an die Bildschirmbreite anpassen
www.mfc-saturn.de
Das selbe würde ich nun noch versuchen bei der Headerhöhe und dem Logobild zu erreichen.

Ich finde ja noch nicht einmal, wo die Logogröße definiert ist.
Ich habe die Hoffnung, das ich ähnlich oder sogar mit clamp, das Logobild entsprechend für die mobil Ansicht kleiner bekomme.
Bei der Headerhöhe (die ist im Moment auf 180px fest), wird es bestimmt nicht so schwierig sein. Das Headerhintergrundbild wird durch die feste Höhe natürlich im Moment nicht in der Höhe skaliert. Da probiere ich noch.
Beim Logo allerdings stehe ich vor einem Rätsel.
Die Definition dafür finde ich einfach nicht.

Danke für einen Denkanstoss.

Danke

 
Letzte Änderung: 1 Jahr 10 Monate her von Jochen Ebert.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Jahr 10 Monate her #5296 von Thomas Hunziker
Fürs Logo gibt es ne eigene ID die du in deiner CSS Regel als Ziel definieren kannst.
Code:
#logo
ist das umgebende "DIV". Das Bild selber dann mittels
Code:
#logo img
Damit solltest eigentlich recht viel machen können.
Folgende Benutzer bedankten sich: Jochen Ebert

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Jahr 10 Monate her #5297 von Jochen Ebert
Habe es nun schon ein wenig hinbekommen.
Code:
/* Schriftgröße HEADER "logo" und "slogan" automatisch anpassen */ #logo a.logo {   font-size: clamp(12px, 6vw, 46px); } div.slogan {     font-size: clamp(14px, 3vw, 18px); } /* Headerhöhe automatisch anpassen*/ #header {       min-height: clamp(80px, 30vw, 180px); } /* Headerlogo nach rechts */ #logo {     margin-left: 10px; } /* Logo Größe automatisch anpassen */ #logo img, svg {   width: clamp(70px, 17vw, 130px); } a.imglogo, a.medialogo{   width: clamp(75px, 20vw, 140px); }
Mit den Werten muss ich noch ein wenig spielen, damit alles ein wenig flüssiger aussieht. Aber vom Grundsatz her klappt es schon mal.
Am Handy sieht es nun schon viel besser aus.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Jahr 8 Monate her #5334 von Thore knels
Hallo,
wie bekomme ich dann das Hamburgermenü in Topmenü hin. Ich hätte es gerne genau wie bei dir. Nebeneinander in der großen Ansicht und auf dem Handy als Hamburgermenü.

Ich habe dazu bislang nichts gefunden. Vermutlich nur der falsche Suchbegriff.

Viele Grüße Thore

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Jahr 8 Monate her #5335 von Thomas Hunziker
Guck mal in die Moduleinstellungen des Menüs. Da kannst beim Layout (im Reiter "Erweitert") das einklappbare Layout wählen. Dann kommt der Hamburger.
Folgende Benutzer bedankten sich: Michael Schwartz

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Ladezeit der Seite: 0.100 Sekunden