Discussion :

[legrandse]

Bonjour à tous,

Je dois adapter mon code sur un modèle au niveau du soulignement de lien mais je n'y arrive pas à 100%.
Voici mon résultat :


et le modèle:


Dans mon code la longueur du soulignement est définie par le padding de l'élément.
Par contre mettre un padding à 0 enlève l'espace des éléments du menu.

Y a t-il moyen de garder l'espacement du menu et de souligner un lien selon la longueur des caractères du lien ?

En vous remerciant pour l'aide

Voici mon

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<nav class="navbar navbar-inverse navbar-right">
			  <div class="container-fluid">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>                        
			      </button>
 
			    </div>
			    <div class="collapse navbar-collapse" id="myNavbar">
			      <ul class="nav navbar-nav">
 
			        <li><a href="#">Accueil</a></li>
			        <li class="dropdown">
			          <a class="dropbtn" data-toggle="dropdown" href="#">Nos lodges<!--<span class="caret"></span>--></a>
			          <div class=" dropdown-content">
			              <a href="#">La Ferme du Père Louis</a>
				         <a href="#">Le Chalet de la Source</a>
				          <a href="#">Le Lodge des Contes</a>
			          </div>
			        </li>
			        <li><a href="#">Votre séjour</a></li>
				    <li><a href="#">Région & activités</a></li>
				    <li><a href="#">évènements & presse</a></li>
				    <li><a href="#">Contact</a></li>
			      </ul>
 
			    </div>
			  </div>
			</nav>

et css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
.navbar-inverse{
	background: transparent;
	margin-top: 35px;
	border : none;
	text-transform: uppercase;
 
}
 
 
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #000;
}
 
.navbar-inverse .navbar-nav > li > a {
	font-weight: 600;
    color: #004e41;
}
 
.nav > li > a {
    padding: 15px 18px 5px 18px;
    border-bottom : 3px   #f9f9f9 solid;
    transition: all 0.2s linear;
 
}
 
.nav > li > a:focus, .nav > li > a:hover {
  	border-bottom : 3px  #deac52 solid;
 
}