Comment faire en sorte que votre navigation Divi commence en bas, puis reste fixe en haut lors du défilement

Dans le tutoriel Divi d'aujourd'hui nous allons vous montrer, étape par étape, comment faire une navigation fixe sur votre site web lors du défilement et après avoir dépassé la hauteur de votre plein écran. Si vous suivez les étapes de cet article et recréez la navigation fixe, vous verrez que la navigation apportera un bel effet d'interaction à votre menu principal et à votre site Web en général.

Nous allons commencer par créer une navigation verticale normale à l'écran. Au lieu d'être en haut de la page, cette navigation sera poussée vers le bas de l'écran. Après le défilement et une fois que vous avez dépassé la hauteur du menu de l'écran, vous verrez que le menu changera de position et se placera en haut de la page. Une fois la navigation corrigée, elle le restera dans le reste de la page. Mais une fois que vous revenez à la section des héros, la navigation se comportera à nouveau normalement et sera placée au bas de la section des héros.

Vous pourriez dire que la page « relèvera » le menu en bas de l'écran et donnera l'effet avancé que vous recherchez. Pour vous aider à visualiser le résultat que nous essayons d'atteindre, examinons le résultat final :

Section Hero : Module d'en-tête pleine largeur avec mode plein écran

Il y a une chose à prendre en considération lorsque vous allez utiliser cet effet pour votre site Web ; vous avez besoin d'un module d'en-tête en mode plein écran. Théoriquement, vous pouvez également l'appliquer à d'autres modules et sections, mais vous devrez apporter quelques modifications pour vous assurer que le menu apparaît au bas de cette section. L'option plein écran que propose Divi garantit que la section héros remplit l'écran (quelles que soient les mesures de l'écran), c'est pourquoi nous vous recommandons de l'utiliser si vous souhaitez appliquer cet effet à votre menu.

Commencez par ouvrir ou créer la page où vous souhaitez ajouter cet effet. Ensuite, ouvrez l'en-tête pleine largeur ou créez-le et accédez à l'onglet Conception. La première chose que vous rencontrerez dans l'onglet Conception est la sous-catégorie Disposition. Allez-y et activez le mode plein écran dans cette sous-catégorie.

Création de la navigation fixe lors du défilement

Pour ajouter l'effet à notre site Web, nous devrons utiliser à la fois des lignes de code CSS et des lignes de code jQuery. Le code CSS que nous utiliserons placera la navigation en bas de l'écran et le fera se comporter comme un pied de page normal avant que le code jQuery ne soit activé. Après cela, les lignes de code jQuery prendront le relais du code CSS personnalisé et laisseront la navigation se comporter en fonction de votre position sur le site.

Ajouter le code CSS requis

Nous allons commencer par ajouter le code CSS requis à notre site Web. En règle générale, il existe trois façons de procéder. Les deux premières façons font que le code s'applique à l'ensemble du site Web. La troisième méthode le fait fonctionner pour une seule page.

Ajouter du code CSS via le personnalisateur de thème

La première méthode que nous allons vous montrer vous permet d'ajouter le code via le personnalisateur de thème. C'est un moyen d'ajouter du code qui n'est pas si souvent utilisé, mais il présente certains avantages. L'un d'eux est que dès que vous avez ajouté le code, vous remarquerez que les changements se produisent en temps réel.

Pour ajouter le code CSS, ouvrez votre tableau de bord WordPress > allez dans Apparence > Personnaliser > Faites défiler l'onglet vers le bas et ouvrez l'onglet CSS supplémentaire > Ajoutez les lignes de code CSS suivantes :

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

Ajouter du code CSS via les options de thème

Une autre option que vous avez, qui est également la plus couramment utilisée, consiste à ajouter le code CSS aux options de thème de votre site Web Divi. Une fois que vous avez ajouté le code, il s'appliquera à l'ensemble du site Web. Si vous recherchez plutôt une possibilité qui ajoute l'effet à une seule page, passez à la possibilité suivante où vous pouvez ajouter le code à une page en particulier.

Pour ajouter le code à vos options de thème ; allez dans votre tableau de bord WordPress > Divi > Options du thème > Faites défiler l'onglet Général et collez le code suivant dans le champ CSS personnalisé :

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Ajouter du code CSS à une seule page

Cette possibilité peut être intéressante si vous souhaitez appliquer cette navigation fixe à une seule page mais pas au reste du site. Si vous utilisez l'en-tête pleine largeur sur la page d'accueil uniquement, par exemple, vous pouvez utiliser cette méthode.

Ouvrez la page où vous souhaitez ajouter la navigation fixe lors du défilement. Ensuite, vous verrez le symbole suivant dans le coin droit du générateur :

Cliquez dessus et vous verrez apparaître un écran où vous pourrez apporter des modifications à toute la page. Ajoutez le code suivant dans la zone CSS personnalisée pour qu'il s'applique à cette page en particulier :

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Ajouter le code jQuery requis

La prochaine étape que nous voulons franchir consiste à ajouter le code jQuery à notre site Web WordPress. Ce code commencera à fonctionner à partir du moment où vous faites défiler. Nous pouvons ajouter le code jQuery de deux manières ; via les options du thème ou via le module de code. Si vous souhaitez ajouter le code à une seule page, vous pouvez utiliser le module de code en combinaison avec la troisième possibilité que nous avons mentionnée pour le code CSS dans cet article.

Ajouter du code jQuery via les options de thème

Pour appliquer le code à toutes les pages de votre site Web, vous pouvez ajouter le code aux options du thème. Allez dans votre tableau de bord WordPress > Allez sur Divi > Continuez vers Options du thème > Ouvrez l'onglet Intégration > Et collez le code suivant dans le champ '<head> de votre blog' :

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Ajouter du code jQuery via le module de code

Si vous souhaitez ajouter le code à une page en particulier, vous pouvez le faire via le module de code. Dans la partie précédente, où nous avons ajouté le code CSS, vous devez avoir choisi la dernière option.

Revenez à cette page et ajoutez une section standard en haut de votre page. Dans cette section standard, ajoutez un module de code. Vous pouvez en fait placer cette section où bon vous semble, mais si vous voulez la retrouver rapidement, nous vous recommandons de la placer en haut de votre page. Ensuite, copiez et collez le code suivant dans la zone de contenu de votre module de code :

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Et c'est tout! Le code devrait maintenant fonctionner, transformer votre menu et rendre votre site Web un peu plus interactif.

Dernières pensées

Dans cet article, nous vous avons montré comment créer une navigation fixe lors du défilement. Nous vous avons fourni quelques lignes de code CSS et quelques lignes de code jQuery qui devraient faire l'affaire. Si vous avez suivi ce post étape par étape, vous devriez pouvoir obtenir le résultat final. Si vous avez des questions ou des suggestions pour les prochains articles ; n'hésitez pas à laisser un commentaire dans la section commentaire ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par DenisXize / shutterstock.com