Diese Mega Menü habe ich hier gefunden:
Ein Beispiel, wie man sich der Bootstrap-Anweisungen bedienen kann. Im Prinzip bin ich nur den Anweisungen HTML - CSS - JS der Beispielseite gefolgt.
Ich habe mir hier den Block "Code Editor", anstelle der Mobirise-Menüleiste, aufgezogen und den HTML-Code vom Mega-Menü kopiert. Diesen HTML-Code habe ich hier mit einigen meiner Links angepasst und mein Logo, anstelle des Beispiel-Logos, eingebaut. Guckt auch in den Quelltext dieser Seite. Ich habe diese Navi mit <!-- Beginn externe Navigation --> markiert.
▶ Hier könnt Ihr meinen HTML-Code einsehen und kopieren und hier die CSSDie CSS habe ich in den Bereich "CSS Editor" vom "Code Editor" kopiert und quasi unverändert gelassen.
Das JavaScript (für MouseOver am PC) habe ich in den <head> Bereich dieser Seite kopiert:
Hier noch ein Screenshot mit der Ansicht am Smartphone.
Navi zentriert auf der Seite darstellen:
Da ich hier den Block "Code Editor" für den Inhalt meiner Navi verwendet habe, stehen noch etliche von Mobirise generierte DIVs um diesen Block herum.
Zum Zentrieren habe ich an der CSS noch eine Anweisung als id="meinenavi" hinzugefügt:
#meinenavi {
display: flex;
justify-content: center;
}
und diese ID dann ganz außen um meinen HTML-Code als DIV gelegt, wobei die class="bg-primary" lediglich die Hintergrundfarbe angibt.
<div id="meinenavi" class="bg-primary">
... hier steht der HTML-Code der Navi wie oben beschrieben
</div>
oder man verwendet gleich (besser) die dafür bereits vorhandenen Bootstrap-Klassen:
d-flex
justify-content-center
bg-primary
<div class="d-flex justify-content-center bg-primary">
... hier steht der HTML-Code der Navi wie oben beschrieben
</div>
Diese Änderung sieht dann so, wie im Screenshot unten, aus.