Comment ajouter l’adresse dans la barre de menu supérieur de Divi

Alex

il y a 7 ans

Si vous utilisez le thème Divi ( ou plutôt un thème enfant de Divi 😉 ), vous avez surement remarqué que les options de celui-ci ne permettent que d’ajouter son adresse email et son numéro de téléphone dans la barre supérieure située au dessus du menu :

Mais pour certaines activités, il peut-être utile de faire figurer son adresse.

Pour remédier à cela, copiez-collez ce code dans Divi-> Options du thème -> Intégration -> Ajoute du code dans la balise <body>. Il ajoutera l’adresse au DEBUT de la barre supérieure :

<script>
jQuery(function($){
    if (!$('#et-info').length) { $('#top-header .container').prepend(''); }
    $('#et-info').prepend(
      '<span style="margin:0 10px"><i class="fa fa-map-marker" aria-hidden="true"></i> 15 avenue de la république, 75015 PARIS</span>'
    );
});
</script>

On ajoute donc ici l’adresse. Vous pouvez remplacer “15 avenue de la république, 75015 PARIS” par la vôtre.

La classe “fa fa-map-marker” permet d’ajouter l’icône de localisation pour que ce soit homogène par rapport aux autres icônes.

Pour ajouter des milliers d’icônes via FontAwesome, utilisez ce snippet.

La fonction prepend() ajoute du contenu (ici l’adresse) au début de l’élément sélectionné (ici la barre supérieure).

Le résultat sur la barre supérieure :

Si vous souhaitez afficher votre adresse APRÈS l’email et le téléphone, copiez-collez plutôt ce snippet au même endroit. La fonction append() est utilisée à la place de la fonction prepend(). Elle ajoute du contenu à la fin de l’élément sélectionné.

<script>
jQuery(function($){
    if (!$('#et-info').length) { $('#top-header .container').append(''); }
    $('#et-info').append(
      '<span style="margin:0 10px"><i class="fa fa-map-marker" aria-hidden="true"></i> 15 avenue de la république, 75015 PARIS</span>'
    );
});
</script>

Le résultat avec ce snippet :

Avez-vous ajouté d’autres informations à cette barre de menu ? Si oui, partagez vos suggestions en commentaire 🙂

Source: Divi Community