Lors de la création d'un site web WordPress utilisant le thème Astra, de nombreuses personnes souhaitent que la barre de navigation située en haut du site web reste fixe lorsque l'on fait défiler les pages, ce qui permet d'obtenir ce que l'on appelle la "barre de navigation". "En-tête collant(Sticky Header). Toutefois, cette fonctionnalité n'est disponible par défaut que dans la rubrique Astra Pro disponible dans la version.

Si vous n'avez pas l'intention de payer pour une mise à niveau de l'Astra, cet article vous apprendra comment obtenir cet effet gratuitement -- la Sticky Header est facile à mettre en ?uvre avec un simple code CSS, aucun plugin ou Astra Pro n'est nécessaire !

Qu'est-ce qu'un en-tête collant ?

Sticky Header (en-tête collant) : lorsque l'utilisateur fait défiler la page web, la barre de navigation située en haut du site web reste fixe et est toujours affichée en haut du navigateur, ce qui permet à l'utilisateur de cliquer facilement sur le menu de navigation à tout moment.

Idées : utilisation de CSS personnalisés pour obtenir un effet d'en-tête collant

Etape 1 : Se connecter au backend de WordPress

Allez dans le backend de votre site WordPress et cliquez sur état extérieur > personnalisation.

étape 2 : Ouvrir le panneau Extra CSS

Dans l'interface "Personnaliser", cliquez sur le menu de gauche de la fenêtre "Personnaliser". CSS supplémentaire(CSS supplémentaire).

étape 3 : Coller le code CSS suivant

Copiez et collez le code suivant dans la zone d'édition CSS :

.ast-header-break-point .main-header-bar {
    position : sticky ;
    top : 0 ; z-index : 999 ;
    main-header-bar { position : sticky ; top : 0 ; z-index : 999 ;
    couleur de fond : #ffffff ;
    width : 100% ; transition : all 0.3s ease
    transition : all 0.3s ease-in-out ;
}

? Immédiatement après le collage, vous voyez que la barre de navigation supérieure est devenue défilable et fixe !

Description des modifications optionnelles des paramètres

Les paramètres suivants peuvent être ajustés selon les besoins :

• haut : 0 ; -- contr?le la distance par rapport au haut de la page (peut être modifié en haut : 50px ;)
• z-index : 999 ; -- s'assurer qu'il couvre le reste (ne pas le réduire trop)
• couleur de fond -- Modifier la couleur de fond de l'état collant (par ex. #000000)
• transition -- Effet d'animation lors de la mise en place de l'adhérence

Si vous souhaitez ajouterMarge intérieure paddingVous pouvez copier le code ci-dessous :

.main-header-bar {
    padding-top : 20px ;
    padding-bottom : 20px ;
}

Optimisation adaptative pour les mobiles (en option)

Ce code permet à la navigation collante de s'afficher correctement sur les téléphones portables.

@media (max-width : 768px) {
  .main-header-bar {
    padding-top : 15px ;
    main-header-bar { padding-top : 15px ; padding-bottom : 15px ;
  }
}

Si vous ne connaissez pas le CSS, laissez ChatGPT vous aider !

Si vous n'êtes pas familier avec les CSS, vous pouvez également copier l'extrait de code ci-dessus et laisser ChatGPT ou des outils d'intelligence artificielle vous aider à le modifier rapidement en fonction de vos besoins (par exemple, changer les couleurs, l'espacement, les ombres), ce qui est parfait pour les utilisateurs novices.

résumés

Même si vous n'êtes pas passé à Astra Pro, vous pouvez facilement mettre en place l'effet sticky header sur votre site WordPress avec un code CSS personnalisé. Le tutoriel de cet article n'a besoin que d'ajouter quelques lignes de code, aucun plugin ne peut faire en sorte que le site Web atteigne la fonction de navigation collante, afin d'améliorer l'expérience et l'utilité du site Web. Si vous souhaitez obtenir davantage de tutoriels et d'informations sur WordPress, veuillez consulter les pages suivantesRéseau de fluctuation des photonsavec les tutoriels WordPress les plus complets et les plus actifs.Communauté d'échange WordPress.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.