Comment faire le chevauchement de navigation standard et vertical sur votre site Web Divi

Dans cet article, nous allons vous montrer comment combiner la navigation standard et verticale. Plus précisement; comment faire en sorte que le menu secondaire et le pied de page chevauchent la navigation verticale sur votre site Web. Cela signifie que vous n'aurez pas à choisir entre une navigation supérieure ou une navigation verticale ; tu peux faire les deux ! Vous pouvez styliser le menu principal et le menu secondaire comme vous le souhaitez dans votre Personnaliseur de thème, ce n'est pas ce que nous allons vous aider à réaliser explicitement dans cet article. Nous allons plutôt vous montrer les choses suivantes qui vous aident dans le processus de faire les choses suivantes :

• comment faire en sorte que votre menu secondaire chevauche votre navigation verticale
• comment faire en sorte que votre menu secondaire soit fixe lors du défilement
• comment faire en sorte que votre pied de page chevauche votre navigation verticale

Ce sont toutes des choses qui vous aideront à créer un bon équilibre entre la navigation standard et verticale sur votre site Web. En faisant chevaucher la navigation standard et verticale, votre site Web n'aura pas l'impression d'être dominé par la navigation verticale. Le contenu principal de votre site Web s'adaptera à la navigation verticale, mais le menu secondaire et le pied de page se comporteront de la même manière que lorsque la navigation verticale n'est pas activée.

Résultat

À la fin de ce didacticiel, vous serez en mesure d'obtenir le résultat suivant sur un site Web utilisant la navigation verticale :

L'inspiration pour chevaucher la navigation standard et verticale

Dans un article précédent, nous avons partagé quelques exemples de sites Web qui utilisent la navigation verticale. Tous les exemples nous ont montré à quel point vous pouvez être créatif avec une option Divi qui n'est pas si souvent utilisée. Une navigation verticale réfléchie sur votre site Web peut donner cette interaction supplémentaire que vous essayiez d'obtenir avec vos visiteurs.

Tout en montrant les exemples, certains commentaires nous ont inspirés pour vous montrer comment obtenir certains résultats. Cet article est l'un de ces tutoriels basés sur l'inspiration qui vous montrera comment apporter quelques modifications à votre site Web sans avoir à rechercher vous-même des solutions.

Nous nous sommes inspirés du site Web d'Alex Brands qui utilise le menu secondaire en haut et la navigation verticale sur le côté gauche de la page.

Pendant le défilement, le menu secondaire défile. Cela donne cette petite touche supplémentaire au site Web et cela aide à garder l'accent sur le contenu dans le menu secondaire. Alex Brands est un site de commerce électronique et le menu secondaire fixe permet de rappeler aux gens ce qu'il y a dans leur panier et l'offre qu'ils proposent.

Ce type de navigation verticale est particulièrement intéressant pour les sites e-commerce. La navigation verticale permet aux visiteurs de naviguer facilement dans les différentes catégories d'articles proposés sur le site Web. Il est plus facile de suivre les éléments de menu lorsqu'ils sont situés dans une navigation verticale, car il est plus facile de les interpréter comme une liste que les gens doivent parcourir.

Comment faire le chevauchement de navigation standard et vertical sur votre site Web Divi

Abonnez-vous à notre chaîne Youtube

Étapes générales

Avant de plonger dans la partie où nous vous montrons comment faire en sorte que votre navigation standard chevauche votre navigation verticale, nous allons d'abord passer en revue les étapes générales. Ces étapes générales sont la base que vous devrez parcourir avant d'appliquer le chevauchement.

Sans autre dû ; Commençons.

Créez votre menu et ajoutez des éléments de menu

La première chose que vous devrez faire (si vous ne l'avez pas déjà fait) est d'ajouter un menu et les éléments de menu à votre site Web. Ce sont les éléments de menu qui apparaîtront dans votre navigation verticale. Pour ajouter un nouveau menu à votre site Web, accédez à votre tableau de bord WordPress > Apparence > Menus. Une fois que vous êtes sur cette page, donnez un titre à votre nouveau menu et créez le menu.

Continuez en ajoutant des éléments de menu et en en faisant votre menu principal.

Ajouter des icônes sociales au menu secondaire

La prochaine chose que vous devrez faire est d'activer votre menu secondaire. Pour vous assurer que le menu secondaire apparaît sur votre site Web, votre menu secondaire doit avoir un élément qui est activé. Dans cet article, nous n'ajouterons que les icônes des réseaux sociaux, mais vous pouvez bien sûr ajouter ce que vous voulez.

Pour activer le menu secondaire et faire apparaître les icônes sociales, commencez par accéder à votre tableau de bord WordPress > Personnaliser > En-tête et navigation > Éléments d'en-tête > Activez l'option « Afficher les icônes sociales ».

Activer la navigation verticale

La prochaine étape que vous devrez franchir consiste à activer la navigation verticale au sein de votre constructeur Divi. Pour ce faire, accédez à votre tableau de bord WordPress > Apparence > Personnaliser > En-tête et navigation > Format d'en-tête > Activer la navigation verticale.

En plus de cela, vous pouvez également choisir où vous souhaitez que votre navigation verticale apparaisse ; sur le côté gauche ou droit de votre site Web.

Désactiver la navigation fixe pour votre menu principal

Avant de passer aux modifications avancées, il reste une dernière chose à faire : désactiver la navigation fixe pour votre menu principal. Si vous avez déjà désactivé le menu principal, ignorez cette étape. Si toutefois votre menu principal est actuellement fixe, accédez à votre tableau de bord WordPress > Divi > Options du thème > Et désactivez la navigation fixe.

Combinez la navigation standard et verticale

Dans la prochaine partie de cet article, nous allons vous montrer comment transformer votre navigation standard et verticale en quelque chose de différent de d'habitude. Quand il s'agit de navigation verticale, nous avons l'habitude de voir une partie de l'écran être recouverte par celle-ci. Le menu secondaire et le pied de page ne passeront pas, par défaut, la navigation verticale.

Mais dans certains cas, nous voulons nous assurer que la navigation secondaire et le pied de page sont au-dessus de la navigation verticale. De cette façon, la seule chose qui dépendra de la navigation verticale est le contenu principal. Votre site Web n'aura pas l'impression d'être complètement divisé en deux endroits ; la navigation verticale et le reste du site.

Ajouter du code CSS aux options du thème

Vous pouvez ajouter le code CSS de deux manières : via les options de thème de Divi ou via le personnalisateur de thème. Pour ajouter le code aux options du thème, accédez à votre tableau de bord WordPress > Divi > Options du thème > Général > Faites défiler l'onglet et collez les lignes de code CSS suivantes dans la zone CSS personnalisée :

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Ajouter du code CSS au personnalisateur de thème

L'autre possibilité que vous avez consiste à ajouter les lignes de code CSS au personnalisateur de thème. Pour ce faire, allez dans votre tableau de bord WordPress > Apparence > Personnaliser > CSS supplémentaire > Et collez les lignes CSS dans le champ CSS personnalisé :

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Dernières pensées

Dans cet article, nous vous avons montré comment combiner la navigation standard et verticale sur votre site Web. Plus précisément; nous vous avons montré comment faire en sorte que le menu secondaire et le pied de page chevauchent votre navigation verticale et comment faire en sorte que votre menu secondaire soit corrigé. Si vous avez des questions ou des suggestions ; 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 Line design / shutterstock.com