So I have just hosted my first website through fastHosts and 99% is working except for this one image that should appear through Javascript when the menu is opened:Menu closedMenu Open

This is what it looks like on VScode live server, working as intended, but on my hosted website with the exact same files the 'X' when menu is opened doesnt appear, but you can still click the area for it to close.

Here is the Script function that is called on click:

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")
    }
}

This function also allows the menu to open and close which is still working on the website.

This is the CSS:

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

It was originally toggled with an aria attribute which I tried changing to a data attribute instead and I have also tried other images but no luck.

The only difference is the hosted website is an index.php and the VScode live server is with index.html as I havent figured out how to locally host it when it is a php file yet. The php code on the site is only for a form that doesnt have anything to do with the button.

Thank you and let me know if you need anything else! :)