ChatGPT hat mir heute auch einmal zur Seite gestanden... Eventuell kann das ja mal einer gebrauchen.
Aber Ihr wusstet das ja bestimmt auch schon wie das umzusetzen ist.
Was wollte ich haben…? Beim Scrollen sollte sich das Logo von Weis in Schwarz ändert. Das hat doch tatsächlich auch funktioniert.
https://dm-webmedia.de/autohaus-fehl/
Vorgehen: Zweites Logo im Menü beim Scrollen anzeigen
1. Logos einfügen
Lade dein normales Logo (z. B. bunt/schwarz) wie gewohnt in den Menü-Block hoch → das bekommt automatisch die Klasse .navbar-logo.
Lade zusätzlich ein zweites Logo (z. B. weiß/hell) in den Menü-Block.
Dafür gehst du in den Code Editor des Menü-Blocks und fügst direkt nach dem ersten Logo ein zweites <img> ein, z. B.:
Code: Alles auswählen
<a class="navbar-logo" href="#">
<img class="logo-light" src="assets/images/logo-normal.png" alt="Logo">
<img class="logo-dark" src="assets/images/logo-white.png" alt="Logo">
</a>
2. CSS hinzufügen
Gehe zu Seiten-Einstellungen → Code Editor → CSS und füge folgendes ein:
Code: Alles auswählen
/* Standard: nur das normale Logo sichtbar */
.navbar .logo-dark {
display: none;
}
Code: Alles auswählen
/* Wenn Navbar gescrollt: normales Logo ausblenden, weißes Logo einblenden */
.navbar.scrolled .logo-light {
display: none;
}
.navbar.scrolled .logo-dark {
display: inline;
}
3. Scroll-Klasse hinzufügen
Manche Mobirise-Themes fügen automatisch beim Scrollen .navbar-short oder .scrolled hinzu.
Wenn bei dir keine Klasse gesetzt wird, dann füge folgendes JavaScript unter Page Settings → Code Editor → Footer ein:
Code: Alles auswählen
<script>
document.addEventListener("scroll", function() {
var navbar = document.querySelector(".navbar");
if(window.scrollY > 50) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled");
}
});
</script>