Comment utiliser GeneratePress pour obtenir un logo centré avec une distribution équilibrée des éléments de menu des deux côtés du site ?

Dans la conception moderne des sites web, la disposition de la barre de navigation a un impact important sur l'effet visuel global et l'expérience de l'utilisateur.GeneratePress Le thème offre des fonctionnalités flexibles et puissantes qui aident les utilisateurs à atteindre les objectifs suivants logo Centré, de haute qualité, avec une répartition équilibrée des plats sur les deux côtés.navigateurcolonne. Cet article détaille les étapes spécifiques pour obtenir cet effet, afin de vous aider à créer facilement un design de navigation atmosphérique simple.

I. Configuration de base

• Allez dans le Customizer du thème → Paramètres généraux
• Assurez-vous que vous utilisez la version Flexbox du thème.

II. sélection de la position de navigation

Pour que la mise en page prenne effet, la position de navigation doit être définie :

• Navigation comme en-tête ou l'option

• Positions de navigation flottante à gauche et à droite (flottante à gauche et flottante à droite)

Une comparaison des deux options sera expliquée plus loin.

Ajouter un code CSS personnalisé

• Retournez dans le personnalisateur et trouvez "Pièces jointes". CSS"Ajouter le code suivant

@media(min-width : 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding, .
    .inside-header>.site-logo, .
    .site-branding-container, .
    #site-navigation .navigation-branding .site-logo, .
    #sticky-navigation .navigation-branding {
        position : absolute ; left : 50% ; #sticky-navigation .navigation-branding {
        navigation-branding { position : absolute ; left : 50% ;
        transform : translateX(-50%) ; z-index : 1000 ; z-index : 1,000 ; z-index : 1,000
        z-index : 1000 ; }
    }

    #site-navigation {
        margin-left : unset !important ; } #site-navigation { margin-left : unset !important ; display : flex ; }
        display : flex ;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin : unset ; }
    }

    #site-navigation, .
    #primary-menu, .main-navigation .
    .main-navigation .inside-navigation {
        flex : 1 ; }
    }

    /* Changez nth-child(#) en premier élément à droite */
    .main-navigation ul li:nth-child(3) {
        margin-left : auto ; }
    }
}

• Modifier le code utilisé pour contrôler la partie droite de l'écran.menuLe numéro au début de l'élément, par exemple, si vous voulez trois éléments à gauche et trois à droite, réglez le numéro sur 4.

• Si le nombre d'éléments de menu est impair, il convient d'ajuster ce nombre pour obtenir un équilibre optimal.

IV. En-tête par défaut ou navigation en tant qu'en-tête

• La disposition de l'en-tête par défaut permet à l'utilisateur de contrôler la hauteur des éléments de menu et des logos séparément, ce qui offre une plus grande flexibilité.

• Après avoir activé l'option "Navigation comme en-tête", la hauteur de l'élément de menu et la taille du logo seront unifiées par le contrôle de la hauteur de l'élément de menu, et l'aspect général sera mieux coordonné.

• Les couleurs d'arrière-plan de la barre de menu et de l'en-tête peuvent être définies séparément pour créer une hiérarchie distincte.

V. Affichage et optimisation des effets

• Si l'option "Navigation comme en-tête" est activée, il n'y a pas d'espace supplémentaire au-dessus et au-dessous des éléments du menu, et la couleur d'arrière-plan peut couvrir toute la barre de navigation pour un aspect plus unifié.
• La hauteur des éléments du menu a été harmonisée avec la taille du logo, et la navigation générale de la page est plus propre et plus moderne.

VI. résumé

faire passer (un projet de loi, une inspection, etc.) GeneratePress La fonction "Navigation as Header", combinée à une personnalisation appropriée de la fonction "Navigation as Header", permet d'améliorer la qualité de l'information. CSSLa dernière nouveauté est la possibilité d'obtenir rapidement un logo centré avec une répartition équilibrée des menus de part et d'autre.barre de navigationMise en page. Cette méthode convient aux utilisateurs qui recherchent une conception de site web propre et professionnelle qui améliore l'expérience globale de l'utilisateur et l'esthétique du site web.

Mises à jour récentes

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.