Jump to content

Recommended Posts

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.

1890621399_menuhorrizontal.thumb.jpg.e9d34d36c75fc89447e77be9310be855.jpg

 

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.

 

854659620_menuhorrizontal2.thumb.jpg.844eda7d0da42af6494b38a325522882.jpg

 

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 

submenu.jpg.ebdc937c4964a840c540c1bf85a228d7.jpg

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.

Share this post


Link to post
Share on other sites
.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;
}

 

Share this post


Link to post
Share on other sites

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é ?

1343620463_sousmenusereferme.thumb.jpg.092e56eec3d077ad04cde74e3ea24552.jpg

 

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 by azer (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More