Eerst en vooral moet je een overgebleven code verwijderen om alles mooi in het midden te krijgen
Te verwijderen:
<div class="col-md-2 hidden-sm-down" id="_desktop_logo"> <h1> <a href="https://www.happyhippo.be/"> <img class="logo img-responsive" src="https://www.happyhippo.be/img/happyhippo-logo-1624268256.jpg" alt="Happy Hippo"> </a> </h1> </div>
Vervolgens kunnen we alles mooi centeren eerst starten we met uw afbeelding de mogelijkheid te geven het volledige gebied te kunnen gebruiken
Verander dit
<div class="col-md-10 col-sm-12 position-static"> <!-- Block search module TOP -->
naar dit (col-md-12)
<div class="col-md-12 col-sm-12 position-static"> <!-- Block search module TOP -->
Nu staat uw afbeelding al mooi in het midden, de volgende stap is uw mainmenu aanpassen
Hiervoor verandere we deze regel
<div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
naar deze regel
<div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu" style="display: flex;margin-left: auto;margin-right: auto;">
Zo krijg je het volgende eindresultaat
