menu déroulant Modifier la taille du menu déroulant horizontal

[azer]

Bonjour, a propos des catégories et sous catégories qui s'affichent au survol de la souris du menu horizontal (module natif), une sorte de popup apparaît afin de laisser apparaître ces catégorie et sous catégorie.

 

Le cadre de cette popup a une taille native que je souhaiterais modifier à la taille des sous catégorie existante dans la popup de manière à coller aux textes qui apparaissent dans ce cadre. Car ça laisse un grand espace vide quand on a pas beaucoup de catégorie.

 

 

Voulant faire une surcouche CSS j'ai ouvert la console pour essayer de trouver le "selecteur" qui correspond à cette popup et lui attribué une règle de {width: ;} mais je ne sais pas quoi faire exactement, de plus j'ai jamais trouver le selecteur concerné.

En inspectant j'ai vu ce truc 

Qui a pour règle css: 

.top-menu .popover {
    max-width: inherit;
    border-radius: 0;
}

La valeur inherit correspond bien à la règle utilisé pour déterminer la largeur du cadre de la popup du menu déroulant je pense car c'est la même largeur que le top-menu, mais pourtant, non, rien a voir car même en utilisant ce selecteur et en mettant un {width: 100px !important;} il n y a aucune réaction.

Y'aurait il quelqu'un qui sais comment faire svp? Ou qui aurait une idée ?

Merci à celles et ceux qui pourrait m'aider la dessus.

[Mediacom87]

.top-menu .sub-menu {
	box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
	border: none;
	margin-left: .9375rem;
	width: auto;
	min-width: auto;
	z-index: 18;
	display: none;
}

 

[azer]

Mais c'est super ça! Merci de m'avoir répondu. Pourtant j'avais essayer ce sélecteur parmi d'autre mais sans résultat, c'est le cache qui avait du me faire défaut ne laissant pas apparaître la modif (pourtant j'ai disable cache sur la console de chrome et j'ai desactiver tous les cache en BO).

Ce qui me met face a un autre problème, le sous menu s'ancre à gauche systématiquement, comment faire pour que la popup du sous menu apparaisse sous le menu qui à été pointé ?

 

Est ce que vous auriez une idée de ce qu'il faut faire ? 

A l'image du width: auto; j'ai tenté un padding-left: auto; mais c'est pas ça. Si je met un padding fixe c'est pas très beau non plus. Je me demande s'il ne va pas falloir modif le fichier ps_mainmenu.tpl dans www\prestashop\themes\classic\modules\ps_mainmenu..

 

Citation

 

Edited February 5, 2019 by azer (see edit history)

[azer]

Et bah il est pas épais ce fichier, y a pas grand chose dedans, je vois pas trop ce que je pourrais modifier:

{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
      <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {foreach from=$nodes item=node}
            <li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>
              {if $node.children|count}
              <div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                {menu nodes=$node.children depth=$node.depth parent=$node}
              </div>
              {/if}
            </li>
        {/foreach}
      </ul>
    {/if}
{/function}

<div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
    {menu nodes=$menu.children}
    <div class="clearfix"></div>
</div>

 

Peut être que ça se joue au niveau d'un data-depth ou bien sur un float.. Si on pourrais m'aiguiller sur la bonne voie ce serais fort sympathique.

Merci par avance.