Styliser le menu plein écran de Divi

Le menu plein écran de Divi présente une excellente opportunité de conception personnalisée. Contrairement aux quatre autres styles d'en-tête disponibles dans le personnalisateur de thème de Divi, le menu plein écran remplit tout l'écran lorsqu'il est actif. Cela laisse de la place à une mise en page créative pour les éléments de menu et d'en-tête de Divi.

Dans l'article d'aujourd'hui, je vais vous montrer comment styliser votre menu plein écran pour lui donner une sensation plus personnalisée pour vos visiteurs. Pour ce faire, je vais modifier quelques options dans le personnalisateur de thème et ajouter du CSS personnalisé.

Commençons.

L'Avant et l'Après

Voici à quoi ressemble le menu pleine largeur par défaut :

Voici un aperçu du nouveau design :

Styliser le menu plein écran de Divi

Abonnez-vous à notre chaîne Youtube

Commencer

Avant de commencer la conception, assurez-vous que vous disposez d'un menu principal actif avec des éléments de menu déjà ajoutés.

Mettre à jour les paramètres dans le personnalisateur de thème

Depuis votre tableau de bord WordPress, accédez à Divi > Personnalisateur de thème > En-tête et navigation > Format d'en-tête. Sélectionnez ensuite Plein écran comme style d'en-tête.

Une fois le style d'en-tête plein écran défini, revenez à En-tête et navigation. Maintenant, vous verrez un nouvel ensemble d'options appelé "Paramètres d'en-tête Slide In & Fullscreen".

Mettez à jour les paramètres d'en-tête Slide In & Fullscreen comme suit :

Cochez l'option Afficher la barre supérieure
Taille du texte du menu : 46 px
Taille du texte de la barre supérieure : 24 px
Police : Playfair Display
Style de police : gras (B)
Couleur du lien du menu : #ffffff
Couleur du lien actif : #edef86
Couleur du texte de la barre supérieure : #ffffff

Revenez maintenant aux paramètres d'en-tête et de navigation et cliquez sur Éléments d'en-tête. Sous Éléments d'en-tête, mettez à jour les éléments suivants :

Sélectionnez Afficher les icônes sociales
Sélectionnez Afficher l'icône de recherche
Numéro de téléphone : [entrez le numéro]
E-mail : [entrer l'e-mail]

Une fois que tout est configuré, voici à quoi devrait ressembler la mise en page par défaut :

Ajoutons maintenant du CSS personnalisé.

Ajout de CSS personnalisé

L'ajout de CSS personnalisé dans Divi peut se faire à quelques endroits. Étant donné que nous utilisons déjà le personnalisateur de thème, accédez à CSS supplémentaire. C'est là que nous allons ajouter notre CSS. Bien sûr, si vous préférez l'ajouter à votre fichier style.css externe dans votre thème enfant, allez-y.

Pour ceux d'entre vous pressés par le temps, vous pouvez passer à la version terminée du code CSS que vous pouvez copier et coller dans votre section CSS supplémentaire. Sachez simplement que vous devrez toujours revenir en arrière et ajouter quelques éléments comme l'image d'arrière-plan à votre code.

Revenons maintenant à l'ajout de notre CSS.

Étant donné que la plupart des CSS personnalisés ne s'appliqueront qu'à la version de bureau de l'en-tête plein écran, nous allons commencer par ajouter une requête multimédia qui cible les tailles d'écran avec une largeur minimale de 980px. Ajoutez les éléments suivants dans la section CSS supplémentaire :

@media all and (min-width: 980px){

}

Modifions maintenant un peu la disposition de l'en-tête plein écran en ajustant la position du menu de navigation et des éléments de la barre supérieure afin que la navigation se fasse à gauche de l'écran et que les éléments de la barre supérieure soient empilés verticalement à droite de la filtrer. Pour effectuer cette modification, ajoutez le css suivant entre les crochets de la requête multimédia.

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

Ensuite, augmentons la taille de notre barre de recherche avec le CSS suivant :

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

Et ajoutons le CSS suivant pour aligner le menu à droite :

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

Agrandissons ensuite l'icône de menu de fermeture dans le coin supérieur droit pour qu'elle soit plus facile à cliquer :

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

Supprimons également la superposition d'arrière-plan derrière les éléments de menu supérieurs et supprimons l'opacité de l'arrière-plan.

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

Si vous avez des éléments de sous-menu, ce CSS agrandit la flèche déroulante à droite de l'élément de menu :

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

Voyons ce que nous avons jusqu'à présent :

Nous sommes maintenant prêts à ajouter notre image de fond. Étant donné que je souhaite que mon image d'arrière-plan s'affiche sur tous les appareils, je vais ajouter ce CSS en dehors des crochets de requête multimédia afin que l'arrière-plan ne soit pas masqué sur les tailles d'écran d'une largeur inférieure à 980px.

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

Si vous n'avez pas encore d'URL d'image d'arrière-plan, téléchargez une image d'arrière-plan (1920 × 1080) dans la galerie multimédia WordPress et copiez l'URL.

Remplacez maintenant le texte qui lit "INSERT IMAGE URL" en collant l'URL de votre image dans le code.

Maintenant, vous avez terminé !

Voici une version complète du code CSS que vous auriez dû ajouter à votre CSS supplémentaire (à l'exception de l'URL de l'image que vous devez fournir) :

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

Cliquez sur Enregistrer et publier

Voyons maintenant :

Disposition alternative du menu de la grille

Pour ajouter une disposition de grille à votre menu, ajoutez le CSS suivant sous votre code actuel et entre les crochets de la requête multimédia :

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

Remarque importante : vous devrez peut-être modifier la taille de la police du menu à 30 pixels (ou à peu près) pour vous assurer que vos éléments de menu ne se chevauchent pas sur des tailles d'écran plus petites. De plus, cette disposition ne fonctionnera pas si votre menu comporte des éléments de sous-menu.

Éléments de sous-menu sur l'en-tête plein écran

Gardez à l'esprit que si vous avez des éléments de sous-menu, l'élément de menu parent ne fonctionnera que comme un lien basculant pour afficher et masquer les éléments de sous-menu. Cela ne fonctionnera pas comme un lien de menu lui-même.

Sensible?

Cette personnalisation est réactive et fonctionne bien sur toutes les tailles d'écran.

L'en-tête plein écran est composé de deux cellules de tableau adjacentes alignées verticalement. La cellule de gauche du tableau contient le menu et la cellule de droite contient les autres éléments d'en-tête. Étant donné que le contenu est aligné verticalement et que les cellules du tableau occuperont chacune 50 % (la moitié) de la taille de l'écran à tout moment, le contenu s'adaptera toujours parfaitement à n'importe quelle taille d'écran.

Si la taille de l'écran est inférieure à 980px (tablettes et téléphones), la disposition par défaut de Divi s'activera et affichera bien le menu sur mobile.

Dernières pensées

Si vous envisagez d'ajouter un en-tête plein écran sur votre site, j'espère que cette conception sera une source d'inspiration utile. La symétrie des éléments d'en-tête et des éléments de menu équilibre les choses et attire davantage l'attention sur les informations de contact, ce qui est important pour de nombreux clients.

Gardez à l'esprit que parce que ce menu est en plein écran, l'image d'arrière-plan sera la clé. Vous ne voulez pas d'une image qui distrait ou noie le contenu important du menu. Si vous ne trouvez pas l'image parfaite qui apporte la personnalité que vous recherchez, optez pour une image qui a simplement fière allure comme arrière-plan et qui est cohérente avec votre conception. Ou vous pouvez simplement utiliser l'option de couleur d'arrière-plan par défaut.

Eh bien, c'est tout ce que j'ai.

Au plaisir de vous entendre dans les commentaires.