3 façons créatives de styliser le lien actif de votre navigation verticale Divi

Dans ce tutoriel Divi, nous allons vous montrer quelques façons intéressantes de styliser le lien actif dans votre navigation verticale. Ce didacticiel fait suite à un didacticiel précédent dans lequel nous vous avons montré comment créer des liens actifs lors du défilement pour les sites Web Divi d'une page. Donc, avant d'essayer les différentes manières de styliser, vous devez d'abord configurer les liens actifs en parcourant l'article précédent, car le code que nous utiliserons s'appuiera davantage sur cela.

Une chose que vous devez garder à l'esprit au cours de ce didacticiel est le fait que vous ne pouvez voir les résultats qu'une fois que vous avez enregistré la page. En prévisualisant simplement votre page, les modifications ne s'afficheront pas.

3 façons créatives de styliser le lien actif de votre navigation verticale Divi

Abonnez-vous à notre chaîne Youtube

Comment ça fonctionne

Pour créer une navigation qui ajuste automatiquement le lien actif lorsque vous faites défiler la page, nous avons utilisé le plugin Page Scroll to ID qui vous aide facilement à obtenir les résultats souhaités. En outre, le plugin vous propose également différentes options que vous pouvez choisir manuellement dans les paramètres.

Le plugin permet d'identifier la position d'un visiteur sur votre site Web et modifiera l'élément de menu en fonction de la section de votre site Web qu'il consulte actuellement. Il s'agit d'une petite interaction qui aidera certainement vos visiteurs à naviguer dans le one-pager. Ils sauront automatiquement quelle partie de votre page ils explorent et à quelle distance ils se trouvent des autres sections qui pourraient les intéresser.

Remarque : sachez que cette méthode ne s'applique qu'aux sites Web constitués d'une seule page.

Activer la navigation verticale

Les exemples que nous allons vous montrer comment créer seront particulièrement utiles si vous utilisez la navigation verticale. Alors, allez-y et activez la navigation verticale dans le personnalisateur de thème (si vous ne l'avez pas déjà fait dans le post précédent).

Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > En-tête et navigation > Format d'en-tête > Activer la navigation verticale.

Style de lien actif n° 1

Le premier exemple que nous aimerions vous montrer est brillant. Chaque fois qu'un visiteur passe par l'une des sections, un autre élément de menu commencera à briller. C'est une manière subtile mais belle et élégante d'aider vos visiteurs à naviguer dans le one-pager.

Paramètres de la barre de menus principale

Commencez par apporter quelques modifications à votre barre de menus principale. Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > En-tête et navigation > Barre de menu principale et apportez les modifications suivantes :

• Masquer l'image du logo : Activer
• Taille du texte : 24
• Espacement des lettres : -1
• Police : Happy Monkey
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : rgba(255,255,255,0)
• Couleur d'arrière-plan de la liste déroulante : rgba(255,255,255,0)

Ajouter du code CSS aux options du thème

La prochaine chose que vous devrez faire est d'ajouter du code CSS. Il existe plusieurs façons d'ajouter du code CSS à votre site Web. Nous allons gérer trois méthodes dans ces exemples, en commençant par les options de thème. Si vous êtes sur votre tableau de bord WordPress, allez dans Divi > Options du thème > Faites défiler l'onglet Général et placez les lignes de code CSS suivantes dans la case CSS personnalisée :

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

Style de lien actif n° 2

Le deuxième style de lien actif est celui qui a un look très propre et élégant. Comme d'habitude, les liens actifs changeront en fonction de la façon dont vous faites défiler le site Web d'une page. Lorsque vous cliquez sur l'un des éléments du menu, le même style s'appliquera.

Paramètres de la barre de menus principale

Nous allons commencer par faire la même chose que dans le premier exemple de cet article ; apporter des modifications à la barre de menu principale. Pour ce faire, accédez à Apparence dans votre tableau de bord WordPress > Personnaliser > En-tête et navigation > Barre de menu principale et assurez-vous d'avoir les paramètres suivants :

• Masquer l'image du logo : Activer
• Taille du texte : 24
• Espacement des lettres : 2
• Police : Homard
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : rgba(255,255,255,0)
• Couleur d'arrière-plan du menu déroulant : rgba(255,255,255,0)

Ajouter du code CSS au personnalisateur de thème

Comme indiqué dans l'exemple précédent, vous pouvez ajouter le code CSS à votre site Web de plusieurs manières. En plus d'ajouter le code personnalisé aux options du thème, vous pouvez également l'ajouter au personnalisateur de thème. Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > CSS supplémentaire et placez les lignes de code suivantes dans le champ CSS personnalisé :

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Style de lien actif n° 3

Le troisième style de lien actif que nous avons choisi de partager avec vous est celui qui se concentre principalement sur le mot-clé utilisé comme élément de menu. En utilisant les bons paramètres pour l'ombre de texte, le même texte entourera l'élément de menu qui met l'accent sur la position d'un visiteur sur votre site Web.

Paramètres de la barre de menus principale

Pour ce dernier exemple, commencez par apporter quelques modifications à la barre de menus principale. Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > En-tête et navigation > Barre de menu principale et apportez les modifications suivantes à la navigation verticale :

• Masquer l'image du logo : Activer
• Taille du texte : 16
• Espacement des lettres : 2
• Police : Josefin Slab
• Style de police : majuscules
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : rgba(255,255,255,0)
• Couleur d'arrière-plan du menu déroulant : rgba(255,255,255,0)

Ajouter du code CSS à une page en particulier

Une autre option pour ajouter du code CSS consiste à l'ajouter à une page en particulier. Ouvrez votre page d'accueil (et donc, la page où vous avez placé tout le contenu) avec le Divi Builder et cliquez sur l'icône suivante :

Une fois que vous avez cliqué sur l'icône, placez les lignes de code CSS suivantes dans le champ CSS personnalisé :

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Dernières pensées

Dans cet article, nous vous avons montré quelques façons simples et agréables de styliser le lien actif dans votre menu. Cet article faisait suite à un article précédent où nous vous avons montré comment créer des liens actifs sur le défilement pour les sites Web Divi d'une page. N'oubliez pas que vous devrez d'abord enregistrer les modifications avant de pouvoir voir les résultats, le simple fait de prévisualiser votre page ne fera pas le travail. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image présentée par Botond1977 / shutterstock.com