Un bouton qui reste statique malgré un menu "shrink"

Bonsoir,

J’ai un font-awesome (contact) qui se trouve dans un menu horizontal shrink. La barre de menu monte donc au scroll, mais le font-awesome reste figé

Voici le HTML

						<ul class="nav navbar-nav px-3">
							<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>
							<button title="Contact" type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#contactModal"><i class="fa fa-envelope-o fa-2x"></i></button>

						</ul>

Et les CSS du "button"

			.btn-link {color: red; border-style : none; border-left-style : none;}

Une personne connait-elle la raison ?

mMerci et bonnes fêtes de fin d’année.

PL

Hello,

Il faudrait un peu plus d’infos pour comprendre le CSS réellement appliqué à ce bouton, notamment ce qui est hérité.

As-tu inspecté l’élément pour voir l’ensemble de styles appliqués ?

En passant, attention avec le texte en majuscule, les lecteurs d’écrans risquent de le rendre différemment. Il vaut mieux passer pas du CSS si l’objectif est uniquement visuel.

Bonjour viki53,

Merci pour ta réponse. J’ai beaucoup cherché et apparemment cela était dû au fait que,le bouton soit dans la liste UL. Malheureusement, actuellement, impossible de centrer le font-awesome en hauteur.

J’ai tenté beaucoup de choses dont le text-align. J’ai tenté de "tricher " avec un margin-top négatif. Cela fonctionne en mode ordinateur mais pour le coup, le font-awesome rentre dans le lien précédent en mode menumobile.

Merci pour ton aide

As-tu essayé de valider ton HTML avant de t’attaquer au CSS ?

L’élément <ul> n’accepte que des <li> comme descendants, rien d’autre.

Au-delà il faudra un peu plus de contexte, comme une démo du rendu (sur Codepen ou jsfiddle par exemple) pour voir ce qu’il se passe.

Bonsoir viki53,

merci pour ta réponse Il a fallut un margin-bottom négatif au bouton pour être centré en hauteur, sinon il était aligné en pied. Je ne pense pas que ce soit très propre mais ça dépanne

Mais sur ce bouton, je n’arrive pas à enlever le contour au "clic" et "cliqué" et à mettre une ombre sur le hover. J’ai tenté beaucoup de CSS pour terminer sur :

.btn-link
{
	color: white;
	border-style : none;
	border-left-style : none;
	margin-bottom: -10px;
	;
	float: right;
	border: none;
	margin-left: -20px;
	outline: none;
}

.btn-link:hover
{
	color: red;
}

.btn-link .activity:focus
{
	outline:none !important;
}

Il paraît que ça fonctionne, mais pas chez moi

Bonne soirée et encore merci

As-tu corrigé le HTML ? Un DOM invalide peut causer des problèmes lors de l’application du CSS car les navigateur doivent corriger et donc modifier le DOM à la volée (ce qui peut être imprévisible).

Ensuite je ne vois pas de HTML correspondant au sélecteur .btn-link .activity. Es-tu sûr que c’est le bon sélecteur ?

Peux-tu fournir une démo pour reproduire le problème ?

Pas de souci, je vais essayer plus tard après être passé par le W3C

Bonne soirée

Bonjour viki53,

Le W3C ne détecte rien et je n’arrive pas à te montrer mon souci via codepen.

ci-dessous le HTML du btn

<button title="Contact" type="button" class="btn btn-link nav-item" data-bs-toggle="modal" data-bs-target="#contactModal"><i class="fa fa-envelope-o fa-2x"></i></button>

merci pour ton aide, bonne journée,

PLS

Tu parles de quel contour au clic exactement ? Si c’est l’outline, le supprimer est une mauvaise pratique car ça permet à l’utilisateur de savoir où est son focus. Par contre tu peux le customiser pour mieux coller à ton identité graphique.

Pour l’ombre, quel code as-tu testé ? box-shadow ?

Sans code pour reproduire difficile de deviner ce qui ne va pas, le contexte peut changer beaucoup de choses.

Oui, j’ai tenté le box-shadow. Je file voir ton lien, merci

oui, mais ce n’ai pas vraiment un bouton Je ne sais pas comment dire… c’est un bouton contact dont le visuel est une enveloppe, un font-awesome icon. Donc je n’ai pas besoin du focus

Les liens aussi ont un style au focus : tous les éléments interactifs en fait. Pour les utilisateurs qui naviguent au clavier c’est indispensable pour se repérer.