Hallo zusammen,
ich bin neu hier. Neu ist für mich auch der Umgang mit Wordpress und CSS.
Ich möchte den Header meines verwendeten "free" oceanwp Theme mit CSS bzw. einem Custom JS erweitern. Teilweise funktioniert es auch schon.
Allerdings habe ich noch eine Hürde zu meistern. Aus dem unten eingefügten Script funktioniert folgender Befehl nicht:
document.getElementById("site-header").getElementsByClassName("minimal-header effect-seven clr")[0].style.data-height = "30";
Mit dem Script unten möchte ich erreichen, dass sich die Höhe des Headers, die Größe des Logos, die Größe der einzelenen Menüpunkte verkleinert und sich die Hintergrundfarbe ändert, sobald man nach unten scrollt.
Außerdem habe ich den Header mit dem CSS-Code fixiert:
* #site-header {
position: fixed;
width: 100%;
top: 0;
}
Ich hoffe meine Wortwahl ist korrekt. Wenn Ihr Rückfragen habt, lasst es mich bitte wissen. Über ein Feedback wäre ich euch dankbar.
Gruß
====================================================================
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
[PLAIN]window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
//document.getElementById("site-header").data-height="35";
//document.getElementById("site-header").style.backgroundColor = "red";
document.getElementById("site-header").getElementsByClassName("minimal-header effect-seven clr")[0].style.data-height = "30";
document.getElementById("site-header").style.padding = "0px 0px 0px 0px";
document.getElementById("custom-logo").style.fontSize = "15px";
} else {
//document.getElementById("site-header").data-height="72";
document.getElementById("site-header").style.backgroundColor = "white";
//document.getElementById("site-header").style.padding = "100px 10px 40px 30px";
document.getElementById("custom-logo").style.fontSize = "35px";
document.getElementById("text-wrap").style.fontSize = "35px";
}
}[/PLAIN]