Styler l'onglet actif

Version imprimable

Bonjour
J'ai ce menu et j'aimerai styler par exemple souligner l'onglet actif, c'est à dire que je suis sur une page de l'onglet, ce onglet soit souligné. Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    </div>
		<nav class="navbar is-center" role="navigation" aria-label="main navigation">
      <div class="navbar-menu is-active">
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
      <div class="navbar-start">
      <a class="navbar-item" href="{{ path('accueil')}}">Accueil</a></a>
				<a class="navbar-item" href="{{ path('waloude')}}">Waloude</a></a>
				<a class="navbar-item" href="#">Prévoyance</a></a>
      </div>
      <div class="navbar-end">  
				<a class="navbar-item" href="{{ path('faq_index')}}">FAQ</a></li>
				<a class="navbar-item" href="{{ path('team')}}">Contactez-nous</a></a>
      </div>
		</div>
    </nav>

13/03/2020, 11h24
ma5t3r
Salut,
Il suffit d'ajouter une classe spécifique

Code:

<a class="navbar-item active" href="{{ path('waloude')}}">Waloude</a></a>

Et ton css
Code:

1 2 3 .navbar-item.active { background: #f00; }
13/03/2020, 11h46
MInfo25

J'ai déjà fait et j'ai re-testé, et ça ne marche pas !
13/03/2020, 13h33
ma5t3r

C'est qu'il y a un souci de priorité sur ta classe CSS.
Ne connaissant pas la structure de ta feuille de style, essaie de positionner le code css à la fin de ta feuille de style, ça devrait fonctionner.