Main navigation issue in Chrome browsers

HTML-CSS
1

I recently inherited responsibility for the following website. It’s main navigation doesn’t show up correctly in Chrome browsers. It appears to show the mobile menu instead of the desktop version. I’m hoping someone might recognize and know a fix for this sort of issue. It’s not clear to me when analyzing in DevTools.

One interesting factor is that if you are viewing the website in Chrome for the first time, the menu may appear correctly. But after clicking around on different menu options, it will eventually show the incorrect view. And from then on, it stays that way.

The website is: aris[dot]com

Here are the incorrect and correct views of what it looks like in Chrome:

menu-views
menu-views1878×1225 90 KB

Any help is very much appreciated!

2

Hello, If you could post the HTML or page source to make it easer to check perhaps a snapshot of the head element might be enough.

1 Like
3

I can’t reproduce it.

The nav is partially handled in JS/jQuery, so maybe it is just a bit buggy. Looks like a custom WP theme, so if the bug is in the JS, asking you to fix the bug without access to the original code is difficult and a bit unreasonable. Do you have access to the actual theme code, or just the build?

1 Like
4

I have access to all of the custom theme files.

5

Well, then at least you have a better chance of debugging the JS. As said, I couldn’t reproduce the bug when I tested the site.

BTW, it isn’t showing the mobile nav, it is just stacking the nav items. It looks like the .sub-menu inline styles are not display: grid as it should be (either it is not set and defaulting to display: block or something is setting it to that inline style). Which should be handled in the JS.

Does it happen in dev or only when deployed?

Considering it is a WP site and any navigation should do a full reload of the page, I would think whatever bugged state it is in should fix itself on navigation (or reload). It could be an issue with the actual loading, including caching (plugins and/or browser cache). If you disable the cache in the browser dev tools network tab, can you still reproduce the bug? Disable any caching plugin as well for testing it.

1 Like