---
title: "[CSS+CODE] Conserver la couleur du lien actif dans un menu one-page"
description: "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…"
url: "https://academy.drgeek.com/docs/avance/divi-code/csscode-conserver-la-couleur-du-lien-actif-dans-un-menu-one-page/"
updated: "2026-03-19"
category: Avancé / Divi (code)
tags:
  - Avancé
---

# [CSS+CODE] Conserver la couleur du lien actif dans un menu one-page

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.