[Résolu] sous-menu en header caché par le reste du site (Créer un compte)

Accueil › Forums › WordPress › [Résolu] sous-menu en header caché par le reste du site
  • WordPress :6.6.1
  • Statut : résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • 1 août 2024 à 16 h 35 min #2477209
    ctomtomdev
    Participant
    Initié WordPress
    6 contributions

    Bonjour (à toutes et tous),

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.4.33 /
    • Thème utilisé : twentytwentyfour (+child)
    • Extensions en place : Media Library Folders , Popup Maker , SiteOrigin CSS , WPForms Lite
    • Nom de l’hébergeur : PlanetHoster.fr
    • Adresse du site : ctomtomdev.go.yo.fr/STUDI_ECF/

    Problème(s) rencontré(s) :

    Dans mon header, j’ai un bloc « Navigation », qui est un composant regroupant 3 éléments de menus (cf. image jointe). Le menu « Articles  » a, normalement, 3 sous-menus visibles, qui constituent les catégories. on ne voit que la première parce que les autres sont cachées par « je sais pas quoi ». j’ai cherché des problèmes d’overflow (forcer overflow:visible en CSS) et de zindex (forcer zindex:99999 en CSS) sans succès.

    Cela me semble totalement inimaginable que WordPress n’ait pas pensé à ce cas, qui est un classique. Sur mobile cela ne pose pas de souci, comme le menu est empilé / menu burger, mais sur écran large où le menu est déroulé dans la même fenêtre, il me manque les deux dernières catégories.

    j’ai rien trouvé chez Google pour me filer un coup de main là-dessus, j’ai tenté un paquet de trucs dans les classes et les classes enfants sous CSS, pas de succès non plus.

    Pouvez-vous me dire s’il y a une astuce pour que le sous-menu s’affiche au-dessus de mon site ?

    A noter que l’image de fond du site, directement en dessous du header, est une bannière WordPress, avec donc un overlay de couleur, réglé avec une transparence de 50%

     

     

    1 août 2024 à 19 h 17 min #2477212
    ferman
    Modérateur
    Maître WordPress
    7119 contributions

    Bonjour,

    Personnellement je vois trois possibilités principales (voir pièce jointe). Des variantes sont possibles.

    1. Vous voulez garder le sous-menu exactement tel qu’il est: il faut augmenter la taille du header. Par exemple: 
      .wp-block-cover__inner-container{min-height: 8em;
      }

    2. Vous voulez garder la hauteur actuelle du header : il faut repositionner le sous-menu  et réduire sa hauteur. Par exemple: 
      .wp-block-navigation-item{position:absolute;
       top:-2em;
      }
      .wp-block-navigation-item__content{padding-bottom:3px
      }

    3. Vous voulez garder la hauteur du header en acceptant une disposition horizontale des éléments du sous menu: vous jouez sur la propriété display:flex du sous-menu. 
      @media only screen and (min-width: 1000px) { #modal-1-content .wp-block-navigation .has-child .wp-block-navigation__submenu-container { 
        flex-direction:row;
        height:30px; 
        }
      }

    • Cette réponse a été modifiée le il y a 2 mois par ferman.
    • Cette réponse a été modifiée le il y a 2 mois par ferman.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    4 août 2024 à 16 h 12 min #2477290
    ctomtomdev
    Participant
    Initié WordPress
    6 contributions

    Bonjour Ferman,

     

    Merci pour votre retour !

    Je vais opter pour la 3ème solution. J’ai jusqu’à 12 catégories, le blog doit être lisible sur mobile, si je mets 8rem voire 16rem pour le header, ça va pas être la joie, sur mobile.

     

    En revanche, ce qu’on est en train de se dire, là, c’est que WordPress a pas du tout prévu la possibilité de faire de l’overflow ? c’est juste hallucinant, non ?

     

    merci pour les snippets CSS, je vais les garder précieusement.

     

    TomTom.

    4 août 2024 à 17 h 49 min #2477291
    Li-An
    Participant
    Maître WordPress
    28707 contributions

    Bonjour, vous confondez WP et le thème. WP c’est le moteur, le thème c’est l’habillage – c’est là où ça coince. Après, vous pouvez poster dans le forum du thème pour demander s’ils peuvent corriger ça.

    4 août 2024 à 17 h 56 min #2477292
    ctomtomdev
    Participant
    Initié WordPress
    6 contributions

    Bonjour Li-An,

    Effectivement, j’ai fait un raccourci ! Etant donné que j’utilise le thème « twentytwentyfour » édité et fourni par WordPress, j’ai mis les deux « dans le même panier » 😉

    En revanche, ce qu’on est en train de se dire, là, c’est que WordPress.org n’a pas du tout prévu, dans son thème de l’année, la possibilité de faire de l’overflow ? c’est juste hallucinant, non ?

    C’est plus précis ainsi.

    TomTom.

    4 août 2024 à 18 h 24 min #2477293
    Li-An
    Participant
    Maître WordPress
    28707 contributions

    En même temps, c’est en effet un peu chelou. Il faudrait tester voir si une extension ne fiche pas la pagaille, mais le plus simple c’est de poser la question aux développeurs. Un bug n’est pas à exclure.

    4 août 2024 à 22 h 15 min #2477302
    ferman
    Modérateur
    Maître WordPress
    7119 contributions

    Avec 12 catégories, vous risquez de dépasser la largeur de l’écran avec le 3ème code. Vous avez une variante du code 1 qui conservera la taille du header actuelle, l’augmentation ne s’appliquant qu’ au survol de ce header. A vous de voir si ça vous convient.

    .wp-block-cover__inner-container:hover{min-height: 8em;
    }

    4 août 2024 à 23 h 32 min #2477303
    ctomtomdev
    Participant
    Initié WordPress
    6 contributions

    ok je vais tester. merci !

    5 août 2024 à 12 h 43 min #2477347
    ferman
    Modérateur
    Maître WordPress
    7119 contributions

    WordPress.org n’a pas du tout prévu, dans son thème de l’année, la possibilité de faire de l’overflow

    En fait il y a bien un overflow mais il est « hidden ». Pourquoi? Je ne sais pas.

    .wp-block-cover,
    .wp-block-cover-image {
      align-items:center;
      background-position:50%;
      box-sizing:border-box;
      display:flex;
      justify-content:center;
      min-height:430px;
      overflow:hidden; 
      overflow:clip;
      padding:1em;
      position:relative
    }
    Dans les CSS du thème

    Vous pouvez simplement faire:

    .wp-block-cover,.wp-block-cover-image {overflow:visible!important;
    }

    ou bien « overflow:unset!important » (sans oublier le !important).

    Je pense que c’est la meilleure solution (celle qui perturbe le moins les CSS d’origine).

    5 août 2024 à 16 h 56 min #2477391
    ctomtomdev
    Participant
    Initié WordPress
    6 contributions

    Bonjour Ferman,

    (j’ai un message qui a dû être modéré ou qui s’est effacé…)

    C’est super, ça a bien marché avec ce dernier CSS, merci infiniment !

    J’avais déjà essayé, mais en ajoutant une classe supplémentaire, ce qui semblait ignoré par WP (et je mets « !important » sur CHAQUE ligne de CSS que j’ajoute, pour être sûr). En ajoutant l’overflow directement dans la classe d’origine, c’est passé. C’est propre et ça donne ce que je voulais avoir. merci encore !

    T.

    5 août 2024 à 17 h 12 min #2477392
    ferman
    Modérateur
    Maître WordPress
    7119 contributions

    je mets !important » sur CHAQUE ligne de CSS que j’ajoute, pour être sûr)

    Vous savez que c’est une chose à ne pas généraliser (quand on peut faire autrement); cela peut poser problème pour d’autres CSS personnalisées. Il vaut mieux préciser plus exactement la cible.

    • Cette réponse a été modifiée le il y a 2 mois par ferman.
    8 août 2024 à 1 h 07 min #2478677
    ctomtomdev
    Participant
    Initié WordPress
    6 contributions

    oui, mais en CMS y a toujours 50 règles les unes par dessus les autres, donc à force de faire du CSS « qui marche pas », mais « qui marche bien » quand j’ajoute « !important », pour cet exercice là au moins j’ai mis le paquet sur !important. je peux voir à l’affiner un peu, c’est sûr.

  • Auteur
    Messages
12 sujets de 1 à 12 (sur un total de 12)
  • Vous devez être connecté pour répondre à ce sujet.