es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo cambiar el valor de visualización de la lista desplegable ul de Elementor en WordPress de “block” a “grid”.

Cómo cambiar el valor de visualización de la lista desplegable ul de Elementor en WordPress de “block” a “grid”.

16 Jul, 2023 Programación

Estoy usando el tema Astra con el plugin de Elementor.

¿Cómo puedo cambiar el valor CSS del ítem ul del dropdown para que se muestre como una cuadrícula en lugar de bloque? Intenté agregar el código CSS personalizado pero no está funcionando.

.elementor-nav-menu--dropdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

También intenté agregar jQuery al final del archivo footer.php, justo encima de la etiqueta body, pero tampoco está funcionando. El código ni siquiera se carga en el sitio web.

<script>
if($('.elementor-nav-menu--dropdown').visible{
  ($('.elementor-nav-menu--dropdown').css('display','grid');
};
</script>

Y probé agregarlo al código personalizado del plugin de Elementor, pero arroja un error de “$ no es una función”.

<script>
if($('.elementor-nav-menu--dropdown').visible{
  ($('.elementor-nav-menu--dropdown').css('display','grid');
};
</script>

Actualmente, cuando el dropdown está visible, el valor de display se ha cambiado a “block”, pero quiero establecer el valor de display como “grid”.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el valor de visualización de los elementos ul desplegables de “block” a “grid” en el tema Astra con el plugin Elementor, puedes probar agregando el siguiente código CSS:

    .elementor-nav-menu--dropdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    Si este código CSS no funciona, puedes intentar agregar un código jQuery al archivo footer.php justo encima de la etiqueta body:

    <script>
    if($('.elementor-nav-menu--dropdown').is(':visible')) {
        $('.elementor-nav-menu--dropdown').css('display', 'grid');
    }
</script>

    O puedes intentar agregar este código jQuery a la sección de código personalizado en el plugin Elementor:

    <script>
    jQuery(document).ready(function($) {
        if($('.elementor-nav-menu--dropdown').is(':visible')) {
            $('.elementor-nav-menu--dropdown').css('display', 'grid');
        }
    });
</script>

    Asegúrate de guardar el archivo o el código personalizado después de agregar el código anterior. Recuerda que jQuery utiliza $ como una abreviatura de jQuery, por lo que debes incluir la biblioteca jQuery antes de usarla.

Comments are closed.