En-tête fixe thème Astra gratuit sans extension (sticky header CSS)

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… 😉

(Article publié en janvier 2024 et mis à jour en juillet 2024 suite au changement de code du thème Astra)

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.

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. 😉

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.

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: 100px;
  }
}

/*Rendre le menu mobile hors toile fixe et ajuster sa marge*/
.ast-main-header-nav-open .ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
  position: fixed;
  margin-top: 0px;
  width:100%;
}

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: 120px;
 }
}

💡 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

Des z-index avec une valeur de 100 pour la barre supérieure (ast-above-header-bar) afin que la barre inférieure n’apparaisse pas lors du défilement. Et pour la même raison, un z-index avec une valeur de 99 est ajouté au menu hors toile.

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*/
.ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
  position: fixed;
  margin-top: -30px;
  width:100%;
  z-index:99;
 }

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 ?