Un menu en gras dans la navbar

Résolu

Bonjour,

Un souci que j'ai depuis pas mal de temps, j'ai le "news" de ma navbar qui est en gras, et désaligné me semble t'il.

Je n'ai pas réussi à trouver d'où ça venait :/

Voici le html :

				<div id="navbarTop" class="collapse navbar-collapse justify-content-end p-1 m-0">
					<ul class="nav navbar-nav px-3">
						<li class="nav-item">
<a class="btn btn-primarybis" data-bs-toggle="modal" data-bs-target="#my-modal">NEWS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section1">INTRO</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section2">SITES</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section3">STYLE</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section4">VIDEOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section5">PHOTOS</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section6">ME</a>
						</li>
					</ul>
				</div>

et les CSS

#menutop nav .navbar-nav {
	margin:0 10px 0 0 !important;
	padding:0 !important;
	font-size: 0.8em;
}
#menutop nav .navbar-nav a {
	display: block;
	color: white;
	padding: 10px 6px 10px 0;
	line-height: 1.3em !important;
	font-family: 'Raleway', sans-serif;
	text-align:right;
	font-size: 1.1em;
}
#menutop nav .navbar-nav a:hover {
	color: white;
	filter: brightness(1.75);
}

nav li {
    display: inline-block;
    overflow:hidden;
    vertical-align: middle;
}
nav ul li:last-child {
    margin-right:0;
}
nav li a{
   display:block;
   padding: 8px 0;
   position:relative;
   font-size:1em;
   transition:font-size 0.2s;
}
nav li a::before {
    content:"";
    width:0;
    height:2px;
    background: white;
    position:absolute;
    bottom:0;
    left:50%;
    right:0;
    transition:all 0.2s;
}
nav li a:hover::before {
    min-width:100%;
    left:0;
}

avec une capture d'écran pour bien voir le problème.

Merci à vous.
Bonne journée,

LM
Macintosh / Chrome 104.0.0.0

2 réponses

  1. Bonjour,

    La mise en gras de l'élément NEWS ne semble pas provenir de ce css, il y a p-e d'autre code css qui est appliqué sur cet élément (voir notamment le code css pour les classes .btn et .btn-primarybis).

    Essaye d'utiliser l'Inspecteur d'élément dans les outils de développement de ton navigateur pour trouver le code css appliqué sur cet élément.

    1
    1. Bonjour Pitet,

      C'était bien la classe .btn qui mettait en gras l'élément NEWS.

      Je l'ai simplement supprimée, elle ne servait plus à rien.

      Encore merci et... BRA-VO.

      Bonne soirée,

      LM

      0