Sur un site one-page créé avec Divi, il peut être utile de conserver visuellement la couleur du lien actif dans le menu pendant la navigation.
Contenu avancé #
Cet article utilise du CSS et du JavaScript. Une mauvaise manipulation peut impacter le menu de navigation du site.
Objectif #
Conserver une couleur spécifique sur le lien actif dans un menu one-page Divi.
Principe #
La méthode repose sur deux éléments :
- un code CSS pour définir la couleur du lien actif
- un script pour appliquer une classe au lien cliqué dans le menu
Code CSS #
Ajoute ce code dans le CSS principal du site :
/* ACTIVE LINK ONE PAGE */
#top-menu-nav #top-menu li.current-item a {
color: #465062 !important;
}
Code JavaScript #
Ajoute ensuite ce script dans la zone prévue pour les scripts du site :
(function($){
$(document).ready(function() {
$('#top-menu li.current-menu-item').first().addClass('current-item');
$('#top-menu li').removeClass('current-menu-item');
$('#top-menu li a').click(function() {
$('#top-menu li').removeClass('current-item');
$(this).parent().addClass('current-item');
});
});
})(jQuery);
Où ajouter ce code #
- Le CSS dans le CSS personnalisé du thème ou du site
- Le JavaScript dans un emplacement prévu pour les scripts, par exemple le footer ou un snippet dédié
Quand utiliser cette méthode #
- Sur un site one-page avec navigation d’ancre
- Avec un menu Divi basé sur la structure classique du thème
- Quand le style actif natif ne suffit pas
Points d’attention #
- Cette méthode dépend de la structure de menu classique de Divi avec
#top-menu - Elle peut ne pas fonctionner de la même manière avec un header personnalisé ou un menu fortement modifié
- Le script repose sur jQuery
Astuce utile #
Teste toujours ce comportement sur une vraie page one-page avec ancres pour vérifier que le lien actif reste cohérent pendant la navigation.
Compatibilité #
Cette méthode reste utile sur certains sites Divi, mais elle dépend du menu standard du thème. Si ton site utilise un header builder, un menu personnalisé ou une structure différente, des ajustements peuvent être nécessaires.
Pour conclure #
Cette solution permet de mieux visualiser le lien actif dans un menu one-page Divi. Elle est particulièrement utile lorsque le comportement natif du menu ne répond pas au besoin.