Bovenste menu is die van de uitleg

De menu hieronder is identiek dezelfde maar in de eertste regel in de nav tag bg-light vervangen door bg-dark en navbar-light vervangen door navbar-dark,
deze menu wekt wel niet omdat dit de 2de is op deze pagina en dat gaat niet, beide gebruiken data-target="#myNavbar" en die naam is niet wijzigbaar.

De menu hieronder is de versie zonder "collapse" dus zonder in- uit- uitklapbare menu en werkt wel. Om het verschil met de menu's hierboven te zien, moet je wel je schermbreedte verkleinen

Eeentje met bg-success


Dan heb je nog de geaccentueerde keuze (dat is de pagina waarop je staat), dat gebeurd met de class="active" in de li van de pagina.
Hier is dat overal Home. Dit systeem werkt enkel als je menu in de pagina staat, dus voor website's met slechts enkele pagina's die je nooit gaat uitbreiden.
Sta je in de pagina Page1 dan moet je in de menu daar die class="active" in de link voor die pagina zetten.
Dus weghalen uit de link voor home en in de link voor Page1 plaatsen.


Laat je in je ul de class navbar-expand-md (of xl lg enz) achterwege en verwijder je de 2de regel dan krijg je een vertikale menu.

<nav class="navbar navbar-expand-md bg-success navbar-dark">
<a class="navbar-brand" href="#">WebSiteName</a>
Het voorbeeld is met de menu met bg-light gemaakt, gebruik je dark dan is de achtergrond dus zwart.
verwijder dus de rode delen en het resultaat staat hieronder.

Daar ik de achtergrond light nogal heeeeeel light vind, heb ik deze verwijderd en een style geplaatst voor de achtergrond.
<nav class="navbar" style="background-color:#eee;">

Dat is dus de slechtste manier om dit te wijzigen, een style definiƫren in de tag zelf.
Je ziet ook dat de menubalk over de volle breedte loopt, dat is mijn schuld omdat dit voorbeeld niet in een kolom staat.
In volgende voorbeeld staat de menu wel in een kolom van col-sm-2 en ik heb een style menu-achtergrond gemaakt in mijn stylesheet.
En in de nav voor de menu bg-light vervangen door menu-achtergrond

Dus een row aangemaakt en 2 kolommen. 1 met col-sm-2 en 1 met col-sm-10 waar dan de inhoud in kan komen.

Hier komt dan je eigenlijke website