Soporte » Diseño – Temas y plantillas » Menu Item con diferente imagen de fondo

  • Resuelto miuxer

    (@miuxer)


    Hola,

    El objetivo es que algunos items del menu tengan diferente imagen de fondo, he intentado con plugins de menu pero el resultado no es el esperado. Pienso que podría ser añadiendo una clase personalizada al menu pero no logro resolverlo.

    Espero puedan orientarme, como se observa no soy experto en php ni wordpress.

    Nota: Plantilla betheme, la documentación y el soporte no lo resuelve.

    Saludos

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Moderador Jose Luis

    (@jose64)

    Hola.

    Bienvenido al foro de soporte de WordPress. Sigue la ruta: Apariencia > Menús. En la esquina superior derecha tienes el botón Opciones que te despliega la visualización de las cajas, en ellas tienes Mostrar propiedades avanzadas de menú, tienes que activar Clases CSS, de esta forma puedes añadir una clase específica para cada elemento del menú.

    Tienes que asignar una clase especial a cada elemento que llevará un fondo y definirla con la propiedad background-image, puedes ver su funcionamiento aquí.

    Por ejemplo, en el elemento del menú BEBÉS añades en Clases CSS (opcional) el nombre de la clase, por ejemplo, fondo-menu-bebes y en el CSS personalizado del tema o en el archivo style.css de tu tema hijo añades el css correspondiente:

    .fondo-menu-bebes {
    	background-image: url("https://www.miuxah.com/wp-content/uploads/2020/10/lama.png");
    }

    Coméntanos si tienes alguna duda y, por favor, recuerda cerrar el debate marcándolo como resuelto cuando así lo consideres, de esta forma nos ayudas a mantener el foro al día.

    Hola Jose,

    Primeramente muchas gracias por tu apoyo, aplique la clase como lo indicas, te explico. La imagen de fondo es únicamente para los items del submenu (2 nivel) ahora esta configurado el menu niños como megamenu, si activo megamenu al item teens y aplico la clase no se respeta, deja el mismo fondo para niños y teens.

    Reviso el siguiente articulo https://www.greengeeks.com/tutorials/article/add-a-custom-css-class-to-wordpress-menus/

    Hare pruebas, saludos Jose. Gracias

    Hola,

    Pude resolverlo momentaneamente añadiendo una clase y forzando con el atributo important. Pienso que no es una buena practica, espero encontrar una mejor solución.

    Gracias

    Moderador Jose Luis

    (@jose64)

    Hola.

    El forzado no es una buena práctica porque se impone a todas las demás reglas, altera la jerarquía de las órdenes y puede ocasionar que rompa reglas que no son específicas, pero en este caso si usas una clase específica para forzar el fondo de un elemento del menú no tiene ningún inconveniente, esa clase será única y simplemente la estás imponiendo a las otras que afecten a ese elemento.

    Recuerda cerrar el debate marcándolo como resuelto, así nos ayudas a mantener el foro al día.

    Hola Jose,

    Muchas gracias por el apoyo. Saludos

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Debes estar registrado para responder a este debate.