Pregunta sobre Twenty Seventeen de Wordpress:

Menú desplegable CSS

Un usuario preguntó 👇

Hola, los elementos del submenú en «proyectos» tienen un fondo blanco) y el resaltado al pasar el mouse no se ajusta cuando la página está en pantalla completa. ¿Alguien puede ayudar a la SEC? gracias !!!

(@anevins)

Donante de WCLDN 2018 Apoyo voluntario

Hace 3 años, 1 mes

¿Puede explicar cuál es el problema?

Lanzador de hilos

(@iwol)

Hace 3 años, 1 mes

el problema es el elemento del menú PROYECTO … cuando lo intento, aparece un submenú con un fondo blanco, un borde rosa y el resaltado del elemento del menú va más allá del marco del cuadro. Quiero cambiar el fondo blanco al color del fondo principal o al menos deshacerme de la línea del borde. TAMBIÉN quiere establecer el tamaño del pico.

(@anevins)

Donante de WCLDN 2018 Apoyo voluntario

Hace 3 años, 1 mes

yendo más allá del marco de la caja.

Esto es lo que causa su CSS personalizado en Siteorigin:


.menu li {
    display: inline-block;
    float: none;
    margin-left: -5px;
}

Esta línea específicamente:


    margin-left: -5px;

Si aún desea mantener ese CSS personalizado, asegúrese de que solo se aplique a la navegación de nivel superior y no a los elementos desplegables utilizando el selector ‘over’:


.menu > li {
    display: inline-block;
    float: none;
    margin-left: -5px;
}

De lo contrario, elimine esa línea.

Quiero cambiar el fondo blanco al color del fondo principal o al menos deshacerme de la línea del borde.

Agregue esto a la sección «CSS adicional» del panel:


@media screen and (min-width: 48em) {

    .colors-custom #site-navigation ul ul {
        border: none;
        background: red;
    }
}

https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

Lanzador de hilos

(@iwol)

Hace 3 años, 1 mes

¡estupendo! todos funcionaron excepto el pequeño triángulo que aún es visible mientras se busca el elemento de menú «proyecto». El fondo del triángulo es blanco y tiene un marco rosa; ¿Podría ayudar a la SEC a cambiar eso? ¡gracias!

(@anevins)

Donante de WCLDN 2018 Apoyo voluntario

Hace 3 años, 1 mes

En lugar de lo que sugerí cuando dije «En la sección» CSS adicional «del panel, agregue esto», intente agregar esto:



@media screen and (min-width: 48em) {

    .colors-custom #site-navigation ul ul {
        border: none;
        background: #eae6e7;
    }

    .main-navigation ul li.menu-item-has-children.focus:before, 
    .main-navigation ul li.menu-item-has-children:hover:before, 
    .main-navigation ul li.menu-item-has-children.focus:after, 
    .main-navigation ul li.menu-item-has-children:hover:after, 
    .main-navigation ul li.page_item_has_children.focus:before, 
    .main-navigation ul li.page_item_has_children:hover:before, 
    .main-navigation ul li.page_item_has_children.focus:after, 
    .main-navigation ul li.page_item_has_children:hover:after {
        display: none;
    }
}

Lanzador de hilos

(@iwol)

Hace 3 años, 1 mes

¡gracias! funciona perfectamente

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *