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 :

barre superieure divi wpmarmite

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 :

barre superieure adresse debut wpmarmite

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 :

barre superieure adresse fin wpmarmite

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

Source: Divi Community