Thread-Starter
3von2
(@3von2)
Nachtrag: Punkt 2 hab ich hin bekommen. Den z-index vergessen…
So läufts:
.navbar {
position:fixed; /*!*/
z-index: 99; /*!*/
box-shadow: 0 2px 10px #555; /*!*/
background-color: #eae7d0;
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
Bleibt „nur“ noch Punkt 1.
Ein childTheme mit der style css( 1zu1kopie vom parent ), header und function.php habe ich eingerichtet.
Ein Child-Theme soll keine 1:1-Kopie des Parent-Theme sein, sondern das Parent-Theme um die gewünschten Abweichungen ergänzen. Das Parent Theme komplett zu kopieren ist deshalb der falsche Weg.
Richtig ist, wenn Du in der functions.phh des Child Themes eine Funktion hinzufügst, die das Style-Sheet des Parent Theme und ein ergänzendes Theme des Child Theme einbindet:
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'parent-style' )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Deine erste Frage verstehe ich nicht. Geht es darum, dass die Abmessungen des Hintergrundbildes bei kleineren Displays reduziert werden? Das erfolgt mit Hilfe der Media-Query, die die Bildbreite auf 768px festlegt und die Höhe entsprechend proportional anpasst.
@media (max-width: 767px)
.site-header {
background-size: 768px auto;
}
… wobei sich die Höhe der Kopfzeile aus dem Innenabstand der Beschriftung ergibt.
@media (max-width: 767px)
.site-title {
font-size: 36px;
padding: 8px 0 10px;
}
Vielleicht beschreibst Du nochmal, wie Du dir das Layout vorstellst?
Thread-Starter
3von2
(@3von2)
Hallo Mario Garde,
Erstmal vielen Dank für deine Hilfe.. mit dem Child Theme ist notiert und werde es dem entsprechend ändern, nochmals Dank. Hab oben in meinen Anliegen einen Link hinterlegt (Beispiel). Dieser Link verweist auf eine Website die genau das macht was ich möchte.
Wenn man die Seite öffnet sieht man ein Fullscreen Image und oben das fixed Navigations Menü. Wenn man scrollt erkennt man das der Header mit der unter Kante des Bildschirms abschliesst.
Um es auf den Punkt zubringen. Egal ob es ein Smartphone/Tablet oder Desktop Pc/Laptop ist, egal wie man das Gerät hält ob quer oder hoch, das Header Backgroundimage ist immer Fullscreen sichtbar und schliesst mit der unter Kante des Bildschirms ab und via Anker verlinkung scrollt man sich in den Content.. Der Header paßt sich also grundsätzlich an dem Bildschirm an. Aus einer naiven Logik heraus sollte eigentlich ein height: 100%; reichen. Den die Höhe ist ja bekanntlich bei jedem Gerät anders. Aber wo setze ich bei diesem Theme an?
Ich hoffe ich konnte mein Anliegen einigermaßen Verständlich erklären.
Zur Sicherheit hier nochmal der Link zu meinem Vorbild.
http://www.novesia-allstars.de/
Gruß Ghani
Ups, den Link hatte ich doch glatt übersehen. Sorry.
In Cascading Style Sheets ist es etwas kniffelig, eine Höhe von 100% zu bestimmen, da im Gegensatz zur Breite nicht ganz eindeutig ist, auf was sich die Höhe beziehen soll. Ich tue mich etwas schwer das zu erklären. Vielleicht hilft Dir dieser (englische) Beitrag weiter. Die Lösung ist jedenfalls, die Höhe nicht nur für den Header, sondern auch für die umgebenden HTML-Tags zu bestimmen:
html, body, .site, .site-header {
height: 100%;
}
.site {
max-width: 100%;
}
.site-header {
background-size:cover
}
Achte bei dem Hintergrundbild auf eine möglichst kleine Dateigröße, da sonst die Website (mobil? 3G oder schlechter?) elend langsam lädt.
Thread-Starter
3von2
(@3von2)
Guten Morgen,
danke für Deine Hilfsbereitschaft. Hab mir sowas schon fast gedacht. Der Hinweis auf den englischen Beitrag ist schon mal Gold wert. Bringt mich definitiv weiter. Werd mal weiter Doktoren und wenn ich es hingekriege poste ich das gerne hier weiter. Falls es noch weitere Hinweise gibt, die mich meinem Ziel näherbringen, gerne immer her damit.
Danke und Gruß
Viel mehr Hinweise als die fertigen CSS-Regeln kann ich Dir nicht geben.
