En-tĂȘte fixe thĂšme Astra gratuit sans extension (sticky header CSS)

En-tĂȘte fixe thĂšme Astra gratuit sans extension (sticky header CSS)
13 mn de lecture

Vous utilisez le thĂšme WordPress Astra en version gratuite et souhaitez crĂ©er un en-tĂȘte fixe (sticky header) ?

Alors, sachez que l’en-tĂȘte collant peut ĂȘtre ajoutĂ© de diffĂ©rentes maniĂšres dans le thĂšme Astra. Par exemple, vous pouvez utiliser Astra Pro, Elementor Pro ou encore une Ă©niĂšme extension WordPress.

AprĂšs, si vous ne voulez pas dĂ©penser un sou ni ajouter d’extension, le moyen le plus simple est d’inclure quelques lignes de code dans le CSS additionnel du thĂšme.

Dans cet article, vous trouverez donc plusieurs solutions pour crĂ©er un sticky header en CSS avec le thĂšme WordPress Astra. Vous pourrez ainsi concevoir gratuitement ce que l’on appelle un menu collant, un menu Ă©pinglĂ©, un menu flottant ou encore un menu sticky en y incluant (ou pas) la top bar et aussi la barre en dessous du menu.

Suivez le guide… 😉

Conseils pour crĂ©er l’en-tĂȘte de votre site

Pour commencer, si ce n’est dĂ©jĂ  fait, crĂ©ez votre en-tĂȘte en allant dans apparence > Personnaliser > En-tĂȘte.

Dans la mesure oĂč vous souhaitez rendre l’en-tĂȘte collant, je vous conseille de dĂ©sactiver l’en-tĂȘte transparent. En effet, l’aspect visuel ne sera pas top au dĂ©filement. AprĂšs, si vous y tenez vraiment. Alors, ajoutez plutĂŽt une couleur dans la ou les barres que vous souhaitez inclure dans l’en-tĂȘte. Puis, jouez sur la transparence.

dĂ©sactiver en-tĂȘte transparent thĂšme Astra pour crĂ©er en-tĂȘte fixe

Et puis, pour que la barre supĂ©rieure (above header) et/ou infĂ©rieure (below header) apparaisse en mode tablette et mobile, n’oubliez pas d’y ajouter les Ă©lĂ©ments dĂ©sirĂ©s. 😉

Ajout éléments dans les barres supérieure et inférieure du thÚme Astra pour le mode mobile et tablette

Cela Ă©tant dit, passons Ă  prĂ©sent aux solutions pour crĂ©er un en-tĂȘte fixe sans extension avec le thĂšme Astra.

CrĂ©er un en-tĂȘte fixe dans le thĂšme WordPress Astra en CSS avec position: sticky;

La premiĂšre solution pour crĂ©er un en-tĂȘte fixe avec le thĂšme Astra consiste Ă  utiliser la propriĂ©tĂ© CSS position avec la valeur sticky.

Pour information, la valeur sticky dĂ©finit la position de l’Ă©lĂ©ment par rapport Ă  l’Ă©lĂ©ment parent. Avec elle, l’Ă©lĂ©ment ciblĂ©, ici l’en-tĂȘte, peut dĂ©filer jusqu’Ă  la valeur de dĂ©calage dĂ©finie dans le code. Ensuite, il reste Ă  cette position. L’avantage de la valeur sticky est qu’elle n’affecte pas la position des autres Ă©lĂ©ments, contrairement Ă  la valeur fixed.

Il est Ă  noter qu’en ciblant l’Ă©lĂ©ment site-header, cela englobera l’en-tĂȘte complet avec la barre de menu et/ou la barre supĂ©rieure et infĂ©rieure si prĂ©sente(s).

Voici le code Ă  ajouter en passant par Personnaliser > CSS additionnel :

/* Astra sticky header CSS*/
.site-header {
 top: 0;
 position: sticky;
}

Pour que vous compreniez mieux, voilĂ  son explication :

  • /*Astra sticky header CSS*/ est simplement un commentaire CSS pour indiquer la finalitĂ© de ce code. Ce qui se trouve entre /* et */ ne sera pas considĂ©rĂ© comme du code, vous pouvez donc indiquer autre chose.
  • .site-header est le nom de l’Ă©lĂ©ment ciblĂ©, ici l’en-tĂȘte global.
  • top: 0; indique la valeur de dĂ©calage Ă  partir de laquelle l’en-tĂȘte ne doit plus dĂ©filer, soit une distance de 0 du haut du site.
  • position: sticky; permet de bloquer l’en-tĂȘte lors du dĂ©filement.

⚠​ Attention, la position sticky peut ne pas fonctionner correctement si un Ă©lĂ©ment parent a une hauteur dĂ©finie ou un overflow dĂ©fini sur hidden, scroll ou auto.

Concevoir un en-tĂȘte fixe dans le thĂšme WordPress Astra en CSS avec position: fixed;

La deuxiĂšme solution pour crĂ©er un en-tĂȘte fixe avec le thĂšme Astra consiste Ă  utiliser la propriĂ©tĂ© CSS position avec la valeur fixed.

Pour information, la valeur fixed signifie “fixĂ© Ă  la fenĂȘtre HTML”. L’Ă©lĂ©ment, ici l’en-tĂȘte, restera fixe que l’on fasse dĂ©filer la page ou non. Il n’aura pas d’espace dĂ©fini sur la page et il sera positionnĂ© sur ou sous d’autres Ă©lĂ©ments. Alors, afin d’Ă©viter que l’en-tĂȘte se superpose au contenu du site, il faudra donc Ă©crire plusieurs lignes de code supplĂ©mentaires.

LĂ  encore, l’Ă©lĂ©ment site-header englobe l’en-tĂȘte complet, que vous n’ayez que la barre de menu et/ou la barre supĂ©rieure et infĂ©rieure en sus.

Pour l’exemple, je suis partie du principe que :

  • La hauteur de la barre de menu (primary header) est de 80 px,
  • celle de la barre au-dessus de l’en-tĂȘte (above header) de 30 px
  • et celle de la barre sous l’en-tĂȘte (below header), Ă©galement de 30 px.
Exemple de hauteurs des 3 barres de l'en-tĂȘte fixe dans le thĂšme Astra gratuit

Donc, dans l’hypothĂšse oĂč votre en-tĂȘte ne comporte que la barre de menu, le CSS Ă  ajouter pour obtenir un sticky menu est :

/*Astra sticky header CSS*/
.site-header {
   position: fixed;
   top: 0;
   width: 100%;
}

/*Ajuster l'espace du début du contenu*/
.site-content {
   padding-top: 80px;
}

/*Ajuster l'espace du début du contenu pour le menu mobile*/
@media (max-width: 921px) {
    .site-content {
       padding-top: 80px;
    }
	/*Rendre le menu mobile hors toile fixe et ajuster sa marge si besoin*/
	 .main-navigation {
	   position: fixed;
	   margin-top: 0px;
}
}

AprĂšs, en fonction des barres que vous avez ajoutĂ©es, il suffira juste de modifier la valeur d’espace (padding-top) avant le contenu (site-content) pour tenir compte de la hauteur totale de votre en-tĂȘte. En bref, en utilisant la valeur “fixed”, tout est une question de calcul pour Ă©viter que l’en-tĂȘte ne cache le contenu.

Alors, supposons que vous avez une barre principale de 80 px. Et que vous ajoutez la barre supĂ©rieure ou infĂ©rieure avec une hauteur de 30 px. Votre en-tĂȘte fixe aura alors une hauteur totale de 80px + 30px = 110 px. Il faudra donc ajuster la valeur d’espace avant le contenu avec un minimum de 110 px.

Prenons un autre exemple. Cette fois, vous souhaitez inclure les deux barres, celles au-dessus et en dessous de l’en-tĂȘte. Votre en-tĂȘte fixe selon les valeurs de mon exemple aura alors une hauteur totale de 80 px + 30 px + 30 px = 140 px. En ce cas, l’espace avant le contenu devra ĂȘtre d’au moins 140 px.

⚠ Attention, les valeurs d’espacement peuvent Ă©galement varier selon votre mise en page.

RequĂȘte multimĂ©dia pour l’en-tĂȘte fixe d’Astra en mode mobile si besoin

Si, en mode mobile, le titre passe sur deux lignes, inĂ©vitablement, vous aurez une plus grande hauteur d’en-tĂȘte.

Pour pallier ce problĂšme, vous avez deux solutions. Soit, vous dĂ©finissez un plus grand espace entre le haut de la page et le contenu globalement dans le code. Soit, vous saisissez une requĂȘte multimĂ©dia supplĂ©mentaire pour dĂ©finir un espace plus grand seulement en mode mobile.

Voici un exemple de requĂȘte multimĂ©dia pour le mode mobile :

/*Ajuster l'espace du contenu pour le menu mobile */
@media (max-width: 544px) {
.site-content {
  padding-top: 100px;
}
}
  /Rendre le menu hors toile sticky en mode mobile et ajuster sa marge/
  .main-navigation {
   position: fixed;
   margin-top: 0px;
}
}

💡 Il est Ă  noter que les points d’arrĂȘt responsive du thĂšme Astra sont assez spĂ©cifiques. En effet, le menu mobile du thĂšme Astra est dĂ©clenchĂ© Ă  partir d’une taille d’Ă©cran de 921 pixels. Et le point d’arrĂȘt pour les mobiles est 544 pixels. Vous devrez donc en tenir compte si vous saisissez des requĂȘtes multimĂ©dia.

Bonus : sticky header pour le thÚme Astra incluant la barre de menu et la barre supérieure sans la barre inférieure

Dans les codes fournis prĂ©cĂ©demment, l’Ă©lĂ©ment ciblĂ© Ă©tait l’en-tĂȘte global, site-header. Il incluait donc toutes les barres prĂ©sentes dans l’en-tĂȘte : la barre principale, celle au-dessus et celle en dessous.

Si vous prĂ©fĂ©rez avoir les trois barres visibles, mais que seules la barre supĂ©rieure et celle du menu soit fixes, c’est possible. Il vous faut juste modifier le code, cibler les Ă©lĂ©ments individuellement et indiquer des z-index. Pour information, la propriĂ©tĂ© z-index sert Ă  contrĂŽler l’empilement des Ă©lĂ©ments. Ainsi, l’Ă©lĂ©ment ayant le z-index le plus Ă©levĂ© sera au-dessus des autres.

Les éléments à cibler individuellement sont :

  • La barre principale ou de menu : main-header-bar
  • La barre supĂ©rieure au-dessus de l’en-tĂȘte : ast-above-header-bar
  • La barre infĂ©rieure en dessous de l’en-tĂȘte : ast-below-header-bar

Le z-index avec une valeur de 100 est dĂ©fini pour la barre supĂ©rieure (ast-above-header-bar) afin que la barre infĂ©rieure n’apparaisse pas lors du dĂ©filement.

Voici le CSS à intégrer dans Personnaliser > CSS additionnel :

/* Astra sticky header CSS */
.main-header-bar  {
  top: 30px;
  position: fixed;
  width:100%;
}
.site-content {
  padding-top: 0px;}

.ast-above-header-bar {
  position: fixed;
  width: 100%;
  top: 0;
  z-index:100;
}

.ast-below-header-bar {
  margin-top: 110px;
}

/*Ajuster l'espace du contenu pour le menu mobile*/
@media (max-width: 921px) {
  .site-content {
    padding-top: 0px;
    }
 /*Rendre le menu mobile hors toile fixe et ajuster sa marge*/
   .main-navigation {
     position: fixed;
     margin-top: 80px;
}
}

VĂ©rification du bon fonctionnement du sticky menu d’Astra

Passons à présent à la derniÚre étape à ne pas négliger : les tests de fonctionnement.

GrĂące Ă  ces tests, vous vous assurez que le CSS ajoutĂ© fonctionne correctement et ne casse pas l’interface utilisateur existante. Il est bien sĂ»r indispensable de le faire pour tous les Ă©crans : ordinateur, tablette et mobile.

En premier lieu, si vous avez un cache sur votre site, videz-le. Puis, visitez votre site Web sur un ordinateur dans une fenĂȘtre de navigation privĂ©e. VĂ©rifiez alors si l’en-tĂȘte dĂ©file bien.

Ensuite, visitez votre site Web sur un appareil mobile et une tablette. Et vérifiez encore une fois si tout fonctionne correctement.

Et enfin, n’oubliez surtout pas de tester si le menu s’ouvre et se ferme correctement sur les diffĂ©rents types d’Ă©cran.

Si tout est OK, bravo ! 😉

Peut-on utiliser ces codes pour créer un sticky header dans tous les thÚmes WordPress ?

Alors là, désolée de vous décevoir, mais non. Ces codes ne fonctionnent que pour le thÚme Astra.

En effet, si vous utilisez un thĂšme WordPress diffĂ©rent, la zone d’en-tĂȘte aura sĂ»rement un nom de classe diffĂ©rent. Vous devrez donc trouver le nom que votre thĂšme utilise pour l’Ă©lĂ©ment d’en-tĂȘte. Puis, remplacer “.site-header” dans le code par celui-ci. (Utilisez l’outil “inspecter” des Chrome DevTools pour le trouver).

La solution la plus simple si vous ne savez pas trop comment faire : Choisissez un thĂšme WordPress gratuit qui propose la fonctionnalitĂ© d’en-tĂȘte fixe gratuitement comme Sydney, Kadence, …

Sinon, farfouillez dans le code du thùme et trouvez une solution de contournement comme celle que je viens de vous expliquer. 😉

Alors, avez-vous rĂ©ussi Ă  rendre votre en-tĂȘte fixe pour le thĂšme WordPress Astra ?

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires