Así que acabo de alojar mi primer sitio web a través de fastHosts y el 99 % funciona excepto por esta imagen que debería aparecer a través de Javascript cuando se abre el menú: Menú cerrado Menú Abierto

Así es como se ve en el servidor en vivo de VScode, funcionando según lo previsto, pero en mi sitio web alojado con exactamente los mismos archivos, no aparece la 'X' cuando se abre el menú, pero aún puede hacer clic en el área para que se cierre.

Aquí está la función Script que se llama al hacer clic:

 function toggle() { const visible = navItems.getAttribute('data-visible') if (visible === "false") { navItems.setAttribute("data-visible", "true") navButton.setAttribute("data-open", "true") } else if (visible === "true") { navItems.setAttribute("data-visible", "false") navButton.setAttribute("data-open", "false") } }

Esta función también permite abrir y cerrar el menú que aún funciona en el sitio web.

Este es el CSS:

 .mobile-nav-button[data-open="true"] { background: url(../Images/X.png); background-repeat: no-repeat; }

Originalmente se alternó con un atributo aria que intenté cambiar a un atributo de datos en su lugar y también probé otras imágenes pero no tuve suerte.

La única diferencia es que el sitio web alojado es un index.php y el servidor en vivo de VScode está con index.html, ya que aún no he descubierto cómo alojarlo localmente cuando es un archivo php. El código php en el sitio es solo para un formulario que no tiene nada que ver con el botón.

¡Gracias y avísame si necesitas algo más! :)