Hi,

I inherited an older website to work on.

Made some changes and can't for the life of me figure out why the mobile menu won't work anymore. Also, just below the menu there is a slider on the homepage that also stopped working and now it just displays all of the images one after the other.

Here is the link to the webpage

Can somebody with some html coding experience please offer me some advice? Perhaps I am missing a closing </div> somewhere?

Thanks,

MaggyJ

Hi


It seems to work in Firefox, but not in Chromium-based browsers (like Edge).


You can check for HTML errors here: https://validator.w3.org --most of the first errors seem minor, but apparently one of them makes the validator think the </head> end tag on line 111 is invalid, which seems to make the validator stop further checking.

Here is the issue I am currently running into:

I can run this website locally with zero issues. The desktop/mobile menu and the rotating banners all run just fine with no issues.

I re-uploaded the entire functional site to the live server but still have the same issues....mobile menu won't drop down and the rotating banner doesn't work either.

Any thoughts?

Edge's javascript console reports that some third-party files are blocked:

Mixed Content: The page at 'https://www.briteshine.com/index.php' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.

Try changing the URLs of all third-party HTTP files to HTTPS and see if that helps.

Firefox doesn't seem to block Mixed content (yet), but I did notice another problem in Desktop view: the nav links in the top row with sub-menus (i.e., "Carpet Cleaning" and "Hard Surface Cleaning") seem to appear behind the nav links below. Also, trying to hover over their opened sub-menus make them close again; this doesn't happen with the sub-menus of the bottom row nav links, so I suspect both things are caused by the same bug.

I changed the url so the jquery.min.js file now loads from https instead of http.

On initial page load everything seems to be working.

I can resize the browser on desktop to show the mobile menu it drops down and works as it should.

But, on mobile the menu still doesn't work at all.

Weird thing happening when refreshing the page seems to break the slider...images fail to load on both desktop and mobile.

I made the mistake of linking to a higher version of jquery which breaks the menu and slider. D'oh!

All seems to be back to normal now.

Thank god for backups.

Thank you so much for your help ChristianJ!

You're welcome! (There's still a problem with the nav menu in Firefox though.)

Ya I noticed the problem with the menu. Could it be a z-index issue?

I wasn't the one that programmed this website.

Google Lighthouse suggested to make the menu font larger (because of readability issues).

Originally the menu only spanned one line so there was no overlap when the menu dropped down. Now, because the font is larger the menu spans two lines instead of one on desktop.

Any suggestions?

Can't say from a quick look. That the menu closes as soon as you try to hover over the opened sub-menu makes debugging harder.

What's odd is that the text of both buttons are visible; if a button was obscured its text shouldn't bleed through like that? The latter could happen if its background was transparent, but that's clearly not the case on the open sub-menu parts below the nav menu, where it's not obscured. Could some CSS3 property be doing this?


All I can think of is going through all the relevant CSS (and JS?) until you understand how it's supposed to work.

Ok, thanks again Christian J!

You didn't find the issue with the nav menu?

Sometimes it helps debugging to crop away any HTML, CSS or JS that is not relevant, until just the buggy part remains.