The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Drop down mobile menu stopped working
MaggyJ
post Oct 20 2024, 01:47 AM
Post #1





Group: Members
Posts: 6
Joined: 20-October 24
Member No.: 29,267



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

This post has been edited by MaggyJ: Oct 20 2024, 02:05 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 20 2024, 06:57 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



Hi

QUOTE(MaggyJ @ Oct 20 2024, 08:47 AM) *

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.

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

QUOTE
Perhaps I am missing a closing </div> somewhere?

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MaggyJ
post Oct 22 2024, 03:48 PM
Post #3





Group: Members
Posts: 6
Joined: 20-October 24
Member No.: 29,267



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?

This post has been edited by MaggyJ: Oct 22 2024, 03:49 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 22 2024, 06:59 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MaggyJ
post Oct 23 2024, 02:37 PM
Post #5





Group: Members
Posts: 6
Joined: 20-October 24
Member No.: 29,267



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.

This post has been edited by MaggyJ: Oct 23 2024, 03:26 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MaggyJ
post Oct 23 2024, 07:57 PM
Post #6





Group: Members
Posts: 6
Joined: 20-October 24
Member No.: 29,267



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. smile.gif

Thank you so much for your help ChristianJ!

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 24 2024, 06:55 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



You're welcome! (There's still a problem with the nav menu in Firefox though.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MaggyJ
post Oct 24 2024, 11:49 AM
Post #8





Group: Members
Posts: 6
Joined: 20-October 24
Member No.: 29,267



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?

This post has been edited by MaggyJ: Oct 24 2024, 11:51 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 24 2024, 02:43 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



QUOTE(MaggyJ @ Oct 24 2024, 06:49 PM) *

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

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?

QUOTE
Any suggestions?

All I can think of is going through all the relevant CSS (and JS?) until you understand how it's supposed to work. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MaggyJ
post Nov 4 2024, 04:40 PM
Post #10





Group: Members
Posts: 6
Joined: 20-October 24
Member No.: 29,267



Ok, thanks again Christian J!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 4 2024, 05:05 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 3rd December 2024 - 06:57 PM