Diese Mega Menü habe ich hier gefunden:

Bootstrap Mega Menü

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 CSS

Die 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:

  <script>
    $(document).ready(function() {
     // executes when HTML-Document is loaded and DOM is ready
    // breakpoint and up
    $(window).resize(function(){
        if ($(window).width() >= 980){
          // when you hover a toggle show its dropdown menu
          $(".navbar .dropdown-toggle").hover(function () {
             $(this).parent().toggleClass("show");
             $(this).parent().find(".dropdown-menu").toggleClass("show");
           });
            // hide the menu when the mouse leaves the dropdown
          $( ".navbar .dropdown-menu" ).mouseleave(function() {
            $(this).removeClass("show");
          });
     
            // do something here
        }
    });
 
    // document ready
    });
  </script>

Hier noch ein Screenshot mit der Ansicht am Smartphone.

Maga Menü

Externe Navigationsleiste

Beispiel mit Header Block über einer Sticky-Navigationsleiste

und noch eine Bootstrap Navigationsleiste und dieses Beispiel

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.

© Mobirise-Tutorials.com
Datenschutzregeln