Hoofdmenu horizontaal centreren

[El zorro]

Is er iemand mij kan helpen? Het lukt mij niet om het hoofdmenu horizontaal te centreren in Prestashop v1.7.7.4

[Crezzur.com]

Heb je een link naar uw webshop? dan kan ik even zien

[El zorro]

Ja hoor, www.happyhippo.be , het lukt me maar niet om het menu te centreren. Omdat ik de standaard banner gebruikt heb om het log in te plaatsen dacht ik dat het daar aan lag. Maar na het verwijderen van de banner bleef het resultaat hetzelfde.

Alvast bedankt voor de moeite.

Stas

[ComGrafPL]

11 hours ago, El zorro said:

Ja hoor, www.happyhippo.be , het lukt me maar niet om het menu te centreren. Omdat ik de standaard banner gebruikt heb om het log in te plaatsen dacht ik dat het daar aan lag. Maar na het verwijderen van de banner bleef het resultaat hetzelfde.

Alvast bedankt voor de moeite.

Stas

Try with font size and little positions change in code. I.e like this:

[Crezzur.com]

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

Edited June 29, 2021 by Crezzur (see edit history)

[El zorro]

Hoi,

Op deze manier ziet dat er fantastisch uit, precies zoals het moet zijn. Als ik via inspecteren in vb firefox de code bekijk zie ik alles wat u bedoeld, maar de code in prestashop vind ik nergens terug. Waarschijnlijk komt dit omdat ik geen programmeur ben. Zou u mij een hint kunnen geven in welke file ik de code moet aanpassen aub? De meest voor de hand liggende file is denk ik themes/classic/templates/_partials/header.tpl

St.

[Crezzur.com]

2 minutes ago, El zorro said:

Hoi,

Op deze manier ziet dat er fantastisch uit, precies zoals het moet zijn. Als ik via inspecteren in vb firefox de code bekijk zie ik alles wat u bedoeld, maar de code in prestashop vind ik nergens terug. Waarschijnlijk komt dit omdat ik geen programmeur ben. Zou u mij een hint kunnen geven in welke file ik de code moet aanpassen aub? De meest voor de hand liggende file is denk ik themes/classic/templates/_partials/header.tpl

St.

Dit kan ook in de module map van uw thema zitten.

/uwthema/modules/ ...

Het makkelijkste is om zowel de thema mappen modules en templates te downloaden en hierin te zoeken met uw bewerkingsprogramma. Dit gaat het snelste zijn.
Zoeken kan je het best doen op vaste waarden (niet op URLs deze worden programmatisch ingeladen)

Bijvoorbeeld zoeken op  js-top-menu, _desktop_top_menu, _desktop_logo