ChatGPT hat geschrieben:
Nachgedacht für 31 Sekunden:
Kurzfassung: Ja – das geht. Du kannst aus der normalen Mobirise-/Bootstrap-5-Navbar ein Mega-Menü machen, ohne navbar-dropdown.js zu ändern. Der Trick ist: wir bleiben bei der gewohnten Dropdown-Struktur, öffnen das Menü auf Hover per CSS, und stylen die .dropdown-menu als zentriertes, breites Panel. Unter 991 px fällt es automatisch auf ein mobiles, untereinander angeordnetes Layout zurück (wieder per CSS, damit Mobirise-JS unangetastet bleibt).
Unten findest du ein minimales, funktionierendes Grundgerüst, das du in deine vorhandene Mobirise-Navbar einsetzen kannst. Ersetze nur eine deiner Dropdown-Positions durch das Mega-Menü (z. B. „Projekte“) und lass alle anderen Menüpunkte wie sie sind.
Das zu ändern wäre möglichstobi_de hat geschrieben: Sa 11. Okt 2025, 09:52
Das Megamenü hätte eine typische Anwendung bei LEISTUNGEN oder ANGEBOTE, was dann im Menü die Position 2 wäre (in meinen Seiten halt)
Fragender Frank
Je mehr Tester desto besser und ich finde Fehler noch schneller (war mal mein Job, und dazu gehört auch usability)
Fade ist möglichstobi_de hat geschrieben: Sa 11. Okt 2025, 10:37 Das geht auch in Bootstrap 4?
Fade-Effekte für ein- und Ausblenden?
Im Handy auf gar keinen Fall Bilder in der Navi!!!!
-> Die Schriftarten müssen sich an Mobi orientieren.
Da seh ich nichtsstobi_de hat geschrieben: Sa 11. Okt 2025, 11:33 Mach die Monitorgröße mal kurz vor Umschalten auf Hamburger.
Dann entgleist die Darstellung komplett.
an Projekt-Kachel → Site Einstellungen → Global HTML Insert → "Before </body> code"Code: Alles auswählen
<!-- JavaScript zum Anpassen der Bildgröße am mobilen Gerät -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const isMobile = () => window.innerWidth <= 991;
function fixMegaMenuMobile() {
if (!isMobile()) return;
// 1) Panel auf volle Breite und statisch
const panel = document.querySelector('.navbar .dropdown.megamenu .dropdown-menu');
if (panel) {
panel.style.position = 'static';
panel.style.left = '0';
panel.style.right = '0';
panel.style.transform = 'none';
panel.style.width = '100%';
panel.style.maxWidth = '100%';
panel.style.boxSizing = 'border-box';
panel.style.margin = '0';
panel.style.padding = '8px 0';
}
// 2) Container/Row/Cols sauber einpassen
document.querySelectorAll(
'.navbar .dropdown.megamenu .dropdown-menu .container, .navbar .dropdown.megamenu .dropdown-menu .row, .navbar .dropdown.megamenu .dropdown-menu [class*="col-"]'
).forEach(el => {
el.style.width = '100%';
el.style.maxWidth = '100%';
el.style.flex = '0 0 100%';
el.style.overflowX = 'hidden';
el.style.boxSizing = 'border-box';
// leichte Seitenpolster
if (el.classList.contains('container')) {
el.style.paddingLeft = '12px';
el.style.paddingRight = '12px';
}
});
// 3) Bilder wirklich auf 100% bringen – egal, was vorher gesetzt wurde
document.querySelectorAll('.navbar .dropdown.megamenu .dropdown-menu img').forEach(img => {
// harte Attribute entfernen
img.removeAttribute('width');
img.removeAttribute('height');
// evtl. inline width/max-width aus Styles killen
if (img.style) {
img.style.width = '100%';
img.style.maxWidth = '100%';
img.style.height = 'auto';
img.style.display = 'block';
// wenn Bilder optisch „zu hoch“ wirken, kannst du das aktivieren:
// img.style.objectFit = 'cover';
// img.style.maxHeight = '220px';
}
});
}
// Beim Start
fixMegaMenuMobile();
// Beim Resize (Wechsel zwischen Desktop/Mobile)
window.addEventListener('resize', fixMegaMenuMobile);
// Wenn das Dropdown geöffnet wird (sicherstellen, dass späte DOM-Manipulationen gefasst werden)
document.querySelectorAll('.navbar .dropdown.megamenu').forEach(dd => {
dd.addEventListener('shown.bs.dropdown', fixMegaMenuMobile);
});
});
</script>Code: Alles auswählen
<li class="nav-item dropdown">Code: Alles auswählen
<!-- Start Mega Menu Dropdown -->
<li class="nav-item dropdown megamenu">
<a class="nav-link link text-white text-primary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" data-app-placeholder="Type Text">
Projekte
</a>
<div class="dropdown-menu mega-menu p-0" aria-labelledby="megaMenu">
<div class="container py-3">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-3">
<img src="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/assets/images/bild01.jpg" alt="Bild 1" class="img-fluid mb-2">
<h6 class="mb-2 text-white">Projekt-Seiten</h6>
<ul class="list-unstyled mb-0">
<li><a class="text-secondary py-0" href="index.html" data-app-placeholder="Type Text">Startseite</a></li>
<li><a class="text-secondary py-0" href="Tutorial.html" data-app-placeholder="Type Text">Mega-Menü Seite -2-</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/assets/images/bild02.jpg" alt="Bild 2" class="img-fluid mb-2">
<h6 class="mb-2 text-white">Test 1</h6>
<ul class="list-unstyled mb-0">
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Link1</a></li>
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Link2</a></li>
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Link3</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/assets/images/bild03.jpg" alt="Bild 3" class="img-fluid mb-2">
<h6 class="mb-2 text-white">Über uns</h6>
<ul class="list-unstyled mb-0">
<li><a class="text-secondary py-0" href="#" data-app-placeholder="Type Text">Team</a></li>
<li><a class="text-secondary py-0" href="#" data-app-placeholder="Type Text">Karriere</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="https://www.mobirise-tutorials.com/AI-Mega-Menu-Mobirise/assets/images/bild04.jpg" class="img-fluid mb-2">
<h6 class="mb-2 text-white">Extras</h6>
<ul class="list-unstyled mb-0">
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Blog</a></li>
<li><a class="py-0" href="#" data-app-placeholder="Type Text">FAQ</a></li>
<li><a class="py-0" href="#" data-app-placeholder="Type Text">Downloads</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<!-- End Mega Menu Dropdown -->Code: Alles auswählen
/* 1) Hover-Öffnen auf Desktop (Bootstrap 5 bleibt unberührt) */
@media (min-width: 992px) {
.navbar .dropdown.megamenu:hover > .dropdown-menu {
display: block; /* statt Click */
}
/* Falls Popper das Menu positioniert, überschreiben wir das */
.navbar .dropdown.megamenu .dropdown-menu[data-bs-popper] {
left: 50% !important;
transform: translateX(-50%) !important;
top: 100% !important;
margin-top: 0 !important;
}
}
/* 2) Mega-Panel: zentriert unter der Navi, breite Fläche */
.navbar .dropdown-menu.mega-menu {
border: none;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
width: clamp(640px, 80vw, 1100px); /* passe nach Geschmack an */
left: 50%;
transform: translateX(-50%);
right: auto;
}
/* 3) Spalten und Typo */
.navbar .dropdown-menu.mega-menu h6 {
font-weight: 600;
letter-spacing: .2px;
}
.navbar .dropdown-menu.mega-menu a {
text-decoration: none;
}
Code: Alles auswählen
/* <= 991px: Mega-Menü mobil stapeln & Bilder wirklich einpassen */
@media (max-width: 991.98px){
/* 1) Spalten sicher auf volle Breite erzwingen */
.navbar .dropdown.megamenu .dropdown-menu.mega-menu .col-12,
.navbar .dropdown.megamenu .dropdown-menu.mega-menu .col-md-6,
.navbar .dropdown.megamenu .dropdown-menu.mega-menu .col-lg-3{
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
/* 2) Container nicht breiter werden lassen */
.navbar .dropdown.megamenu .dropdown-menu.mega-menu .container{
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* 3) Bilder: ALLES überschreiben, auch Inline-Styles */
.navbar.navbar .dropdown.megamenu .dropdown-menu.mega-menu img,
.navbar.navbar .dropdown.megamenu .dropdown-menu.mega-menu img[style*="width"],
.navbar.navbar .dropdown.megamenu .dropdown-menu.mega-menu .myimg{
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
}
Code: Alles auswählen
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/gemini_generated_image_a0110ma0110ma011-1224x668.png" alt="Bild 1" data-app-img="image" class="img-fluid mb-2">Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast