Comment ajouter un en-tête fixe personnalisé pour mobile à l'aide de Divi
Publié: 2017-09-01Avoir un en-tête fixe (ou navigation) sur mobile peut augmenter la convivialité de votre site s'il est fait correctement. La navigation fixe en général semble être 22% plus rapide à naviguer que les en-têtes standard. Dans ce monde technologique à grande vitesse, c'est une statistique considérable même si c'était la moitié de cela.
Et, avec Divi, ajouter un en-tête fixe à votre site peut se faire avec quelques lignes de CSS. Divi vous permet déjà de personnaliser vos en-têtes mobiles à l'aide du personnalisateur de thème, mais il n'existe actuellement aucun paramètre intégré pour déployer un en-tête fixe pour mobile. Dans ce tutoriel, je vais vous montrer comment ajouter un en-tête fixe personnalisé sur mobile qui comprend les éléments suivants :
- Un logo différent (plus adapté aux mobiles) que votre version de bureau.
- Un en-tête plus court pour permettre plus d'espace de visualisation disponible.
- Une icône de navigation hamburger cliquable plus grande pour faciliter le déploiement de la navigation mobile.
- Un fond semi-transparent qui rend l'en-tête encore plus intrusif lors de la visualisation du site.
Voici un petit aperçu de ce à quoi ressemblera l'en-tête.
La mise en place
Cette configuration est similaire à mon article précédent sur la commutation de votre logo sur un en-tête fixe. Avant de commencer, assurez-vous d'avoir effectué les opérations suivantes :
- Assurez-vous d'avoir installé la dernière version de Divi.
- Créez un menu principal actif pour votre site.
- Depuis le backend de votre site WordPress, accédez à Personnalisateur de thème > En-tête et navigation > Format d'en-tête et assurez-vous que le style d'en-tête par défaut est sélectionné.
- Créez deux versions de votre logo au format 200 × 131 et ajoutez-les à votre médiathèque WordPress. Un logo sera utilisé pour l'en-tête principal et un autre pour votre en-tête fixe. Si vous le pouvez, rendez la version d'en-tête fixe du logo plus horizontale afin qu'elle ne soit pas écrasée verticalement sur l'en-tête fixe plus petit. Voici un exemple de mon logo d'en-tête principal que j'utilise.
Voici un exemple de mon logo d'en-tête fixe. Remarquez que j'ai recadré le texte afin de créer un logo plus simple et plus horizontal qui s'intègre bien sur un en-tête avec moins de hauteur. Il est peu probable que quiconque puisse lire ce texte de toute façon et la marque est toujours représentée. 
- Configurez votre menu principal avec des éléments de menu.
Étant donné que nous ajouterons du CSS personnalisé pour réaliser l'en-tête fixe, nous n'avons pas besoin de personnaliser les options d'en-tête standard ou d'en-tête fixe dans le personnalisateur de thème. Mais, si vous souhaitez dupliquer les paramètres pour les tailles de menu et de logo dans mon exemple, complétez ce qui suit (cela est complètement facultatif):
Accédez aux paramètres d'en-tête et de navigation dans le personnalisateur de thème. Sélectionnez la barre de menus principale et mettez à jour les éléments suivants :
Hauteur du menu : 105
Hauteur maximale du logo : 80
Taille du texte : 20
Revenez maintenant à En-tête et navigation. Sélectionnez Paramètres de navigation fixes et mettez à jour les éléments suivants :
Hauteur du menu fixe : 60
Taille du texte : 20
Une fois que vous avez terminé ces étapes, vous êtes prêt à commencer.
Comment ajouter un en-tête fixe personnalisé pour mobile à l'aide de Divi
Abonnez-vous à notre chaîne Youtube
Commencer
Nous mettrons en œuvre cette conception en entrant dans le CSS personnalisé dans la section CSS supplémentaire du personnalisateur de thème Divi. Parce que nous ciblerons uniquement les appareils mobiles, nous allons envelopper tout notre CSS dans une requête multimédia qui limite le style aux largeurs de navigateur inférieures à 980px. Allez-y et commencez par entrer ce qui suit dans la zone CSS supplémentaire :
@media (max-width: 980px) {
}
Création de votre en-tête fixe mobile à l'aide de CSS
Étant donné que Divi ajoute déjà une classe appelée « et-fixed-header » lorsque l'utilisateur fait défiler la page, nous pouvons utiliser ce sélecteur dans notre CSS personnalisé pour créer et styliser notre en-tête fixe mobile.
Ce premier groupe de CSS ci-dessous rend l'en-tête fixe (ou collant) en haut de la page, puis ajuste la hauteur de l'en-tête fixe à 55px. Il ajoute également une couleur de fond blanc semi-transparent. Ajoutez ce qui suit à votre CSS supplémentaire dans le personnalisateur de thème entre les crochets de la requête multimédia.
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
Apple suggère que tous les éléments cliquables de l'interface utilisateur pour leurs applications soient d'au moins 44 × 44 pixels afin que nos pouces et nos doigts puissent les cliquer facilement. Ce serait un bon guide pour les éléments de l'en-tête fixe mobile. Le CSS suivant rend l'icône de navigation 45px.
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
Enfin, ajoutons plus de hauteur pour notre logo sur l'en-tête fixe afin que nous puissions mieux le voir. Saisissez le CSS suivant :
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
C'est ça! Nous avons tous terminé.
Voici la collection finale de CSS pour créer votre en-tête fixe mobile :
@media (max-width: 980px) {
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
}
Enregistrez vos paramètres. Vous avez maintenant un en-tête fixe mobile fonctionnel.
Changer votre logo sur votre en-tête fixe mobile
Si vous souhaitez utiliser un logo différent pour votre en-tête fixe mobile, vous pouvez le faire assez facilement avec du jQuery. Tout ce dont vous avez besoin, ce sont les URL des deux logos que vous allez utiliser. La première URL de l'image du logo doit être le logo par défaut que vous utilisez déjà pour votre site. La deuxième URL de l'image du logo doit être le logo que vous souhaitez utiliser pour l'en-tête fixe mobile. Assurez-vous de télécharger les deux logos dans la médiathèque et de récupérer les URL.
Une fois que vous avez les deux URL, accédez au tableau de bord WordPress et accédez à Divi > Options du thème > Intégrations. Recherchez la zone de saisie « Ajouter du code à l'en-tête de votre blog » et entrez le script jQuery suivant :
<script>
var imageUrl = [
'ENTER DESKTOP LOGO IMAGE URL',
'ENTER MOBILE LOGO IMAGE URL',
];
jQuery(window).on('scroll', function() {
var $header = jQuery('header');
var $logo = jQuery('#logo');
if ((jQuery(window).width() < 981) &&
($header.hasClass('et-fixed-header'))) {
return $logo.attr('src', imageUrl[1]);
};
return $logo.attr('src', imageUrl[0])
});
</script>
Remplacez maintenant le texte « ENTRER L'URL DE L'IMAGE DU LOGO DU BUREAU » par l'URL du logo que vous utilisez actuellement pour votre site.
Remplacez ensuite le texte « ENTRER L'URL DE L'IMAGE DU LOGO MOBILE » par l'URL du logo que vous souhaitez utiliser uniquement pour les appareils mobiles.
Enregistrez les paramètres et vérifiez les résultats.
Prise en charge du navigateur
Dans cet article, j'ai créé l'en-tête fixe en utilisant uniquement CSS, en m'appuyant fortement sur la propriété CSS "position:fixed". Cette propriété CSS peut être incohérente avec les anciennes versions des navigateurs mobiles, en particulier sur iOS Safari et Android. Mais de nos jours, "position:fixed" est assez bien pris en charge sur les nouvelles versions des navigateurs mobiles (à l'exception d'Opera Mini).
Il existe d'autres plugins et solutions JavaScript plus robustes, mais j'ai pensé qu'il était préférable de vous donner la version CSS simple. Veuillez envisager d'explorer ces options si cette solution ne fonctionne pas pour vous.
Dernières pensées
Il convient de mentionner que les en-têtes fixes mobiles peuvent nuire à la convivialité. Parce qu'ils continuent à bloquer la partie supérieure de votre navigateur à tout moment, si vous ne faites pas attention, vous risquez de gaspiller des biens immobiliers précieux sans raison valable. N'oubliez pas que tout le monde n'a pas une phablette comme ce type.
C'est pourquoi il est important de personnaliser votre en-tête fixe pour les appareils mobiles en lui donnant une hauteur plus courte, un logo différent et un bouton de navigation plus grand. Et en ajoutant quelques lignes de CSS à votre site Divi, vous pouvez avoir un en-tête fixe sur mobile sans avoir à utiliser un plugin tiers. Donc, s'il est logique d'en ajouter un à votre prochain projet, allez-y. Avoir ce type de fonctionnalité peut améliorer l'interface utilisateur de votre site Web.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!