Dans cet article, je vais vous expliquer les étapes pour changer le nombre de colonnes dans le menu Divi Mega.

Si vous n’êtes pas sûr de ce qu’est le méga menu standard de Divi, veuillez consulter l’article Créer des méga menus dans Divi pour comprendre comment configurer le méga menu dans le thème Divi.

Le code de cet article ne fonctionne qu’avec le méga menu disponible dans Divi. Cela peut ne pas fonctionner pour les plugins de méga menu tiers.

Voici une capture d’écran de ce à quoi ressemble le méga menu standard.

Divi Mega Menu quatre colonnes

Le menu Divi Mega contient 4 colonnes par défaut. Le thème Divi n’a pas d’options pour changer le nombre de colonnes dans un méga menu.

Cependant, le nombre de colonnes peut facilement être modifié avec du code CSS personnalisé.

Le méga menu peut être ajouté dans l’en-tête du thème standard ou dans le module de menu. J’ai séparé les étapes pour chacune d’entre elles ci-dessous.

Il est facile de modifier le nombre de colonnes du méga menu dans l’en-tête de rubrique standard. Tout ce que vous avez à faire est d’utiliser l’un des codes ci-dessous et de l’ajouter à vos options de conception Divi.

Ajoutez du CSS personnalisé pour changer le méga menu en 5 colonnes

Pour changer le nombre de colonnes dans le méga menu à 5 colonnes, accédez à la vôtre Tableau de bord WordPress> Divi> Options du thème> Général> CSS personnalisé puis ajoutez le code suivant.

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
    width: 20%;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

Si vous ne savez pas où ajouter le code, vous pouvez consulter la capture d’écran ci-dessous.

Les options du thème CSS personnalisé de Divi modifient les colonnes du méga menu

Nous pouvons également utiliser du CSS personnalisé pour changer le nombre de colonnes dans le méga menu à 2,3,6,7 ou 8.

Vous pouvez copier et coller l’un des codes suivants dans vos options eux pour modifier le nombre de colonnes en fonction de vos besoins.

CSS personnalisé pour changer le méga menu en 2 colonnes

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
    width: 50%;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

CSS personnalisé pour changer le méga menu en 3 colonnes

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
    width: 33.33%;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

CSS personnalisé pour changer le méga menu en 6 colonnes

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
    width: 16.6666666667%;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

CSS personnalisé pour changer le méga menu en 7 colonnes

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
    width: 14.2857142857%;
    min-height: 195px;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

CSS personnalisé pour changer le méga menu en 8 colonnes

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
    width: 12.5%;
    min-height: 195px;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

Pour appliquer du code personnalisé à un module, il est recommandé de le cibler sur une classe CSS spécifique afin que la modification n’affecte pas l’ensemble de votre site Web et ne provoque pas de problèmes inattendus. L’utilisation d’une classe CSS personnalisée dans votre code garantit que seul le module avec la classe CSS est affecté.

La première étape consiste donc à ajouter une classe CSS personnalisée au module de menu.

Ajouter une classe CSS pour changer les colonnes de méga menu dans le module de menu

Ouvrez ça Menu Paramètres du module> Avancé> CSS> Classe CSS et entrez dans la classe lwp-col-mega-menu.

Si vous ne savez pas où ajouter la classe, voici une capture d’écran pour vous aider.

Modifier le méga menu des colonnes CSS personnalisées du module de menu

Ajoutez du CSS personnalisé pour changer le méga menu du module de menu en 5 colonnes

L’étape suivante consiste à ajouter le code CSS personnalisé pour modifier le nombre de colonnes dans les options de thème.

Ajoutez le code suivant au vôtre Tableau de bord WordPress> Divi> Options du thème> Général> CSS personnalisé.

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
    width: 20%;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

Si vous ne savez pas où ajouter le code, voici une capture d’écran pour vous aider.

Les options du thème CSS personnalisé de Divi modifient les colonnes du méga menu

Le code suivant vous permet de changer le méga menu dans le module de menu en 2,3,6,7 ou 8 colonnes.

CSS personnalisé pour changer le méga menu en 2 colonnes dans le module de menu

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
    width: 20%;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

CSS personnalisé pour changer le méga menu en 3 colonnes dans le module de menu

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
    width: 33.33%;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

CSS personnalisé pour changer le méga menu en 6 colonnes dans le module de menu

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
    width: 16.6666666667%;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

CSS personnalisé pour changer le méga menu en 7 colonnes dans le module de menu

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
    width: 14.2857142857%;
    min-height: 195px;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

CSS personnalisé pour changer le méga menu en 8 colonnes dans le module de menu

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
    width: 12.5%;
    min-height: 195px;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
    clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
    clear: unset;
}
}

Voici quelques tutoriels Divi que vous voudrez peut-être lire.

  1. Voici comment ajouter un bouton Actions au menu Divi
  2. Comment ajouter des boutons côte à côte dans le design Divi
  3. Supprimer l’option de téléchargement de la vidéo dans le module vidéo Divi

Laissez un commentaire ci-dessous si vous avez des questions. N’oubliez pas de vous abonner à la newsletter pour recevoir les derniers tutoriels dans votre boîte de réception.



Source link

Recent Posts