En el dise?o de sitios web modernos, la disposición de la barra de navegación influye mucho en el efecto visual general y la experiencia del usuario.GenerarPrensa El tema ofrece funciones flexibles y potentes que ayudan a los usuarios a conseguir logotipo Centrado, de alta calidad y con una distribución equilibrada de los platos del menú a ambos ladosnavegadorcolumna. En este artículo se detallan los pasos específicos para conseguir este efecto, con el fin de ayudarle a crear fácilmente un dise?o sencillo de navegación atmosférica.

I. Configuración básica

• Vaya a Personalizador de temas → Configuración general
• Asegúrese de que está utilizando la versión Flexbox del tema.

II. Selección de la posición de navegación

Para que el dise?o surta efecto, es necesario establecer la posición de navegación:

• Navegación como cabecera o bien

• Posiciones de navegación flotante izquierda y derecha (Float Left y Float Right)

La comparación de ambas opciones se explicará más adelante.

A?adir código CSS personalizado

• Vuelve al personalizador y busca "Archivos adjuntos CSS"a?ada el código siguiente

@media(min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding, .
    .inside-header>.site-logo, .
    .site-branding-container, .
    #sticky-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; }
    }

    /* Cambiar nth-child(#) al primer elemento a la derecha */
    .main-navigation ul li:nth-child(3) {
        margin-left: auto; }
    }
}

• Modificar el código utilizado para controlar la parte derecha delmenúEl número al principio del elemento, por ejemplo, si desea tres elementos a la izquierda y tres a la derecha, establezca el número en 4.

• Si hay un número impar de elementos de menú, ajuste este número para un equilibrio óptimo.

IV. Cabecera por defecto vs. navegación como cabecera

• El dise?o predeterminado de la cabecera permite al usuario controlar la altura de los elementos de menú y los logotipos por separado, lo que proporciona una mayor flexibilidad.

• Tras activar la opción "Navegación como cabecera", la altura del elemento de menú y el tama?o del logotipo se unificarán mediante el control de altura del elemento de menú, y el aspecto general estará más coordinado.

• Los colores de fondo de la barra de menús y de la cabecera pueden configurarse por separado para crear una jerarquía diferenciada.

V. Visualización y optimización de los efectos

• Cuando se activa "Navegación como cabecera", no habrá espacio extra encima y debajo de los elementos del menú, y el color de fondo puede cubrir toda la barra de navegación, lo que la hace visualmente más uniforme.
• La altura de los elementos del menú se ha armonizado con el tama?o del logotipo, y la navegación general por la página es más limpia y moderna.

VI. Resumen

pasar (una factura o inspección, etc.) GenerarPrensa Función "Navegación como cabecera", combinada con una personalización adecuada de la CSSLa función más novedosa es la posibilidad de conseguir rápidamente un logotipo centrado con una distribución equilibrada de los menús a ambos lados.barra de navegaciónDise?o. Este método es adecuado para usuarios que buscan un dise?o de sitio web limpio y profesional que mejore la experiencia general del usuario y la estética del sitio web.

Actualizaciones recientes

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres