Menu Not Working After Upgrade to 1.75

Hi,

> On our development site (https://website.cpcu.co.uk running 1.75), hover on “Products”, go to “Savings” and menu gets overwritten. Slide right slightly and menu flickers.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

.site-header #mainnav ul li ul.sub-menu li ul.sub-menu {
  right: 100%;
  padding-top: 0;  
}

Another related problem is, using 1.75, if the browser screen is minimised horizontally to its smallest size so that the hamburger menu replaces the drop-down menu and the hamburger menu is clicked without selecting any menu item, and then the screen is maximised, the main menu appears in black and does not work correctly.

This is not considered as an issue tobecause the main menu selector is changed dynamically with the theme’s JavaScript in order to serve different look of the main menu on mobile and desktop screen. Refreshing page should resolve itself. And I don’t think your customers will view your page that way — resizing the web browser’s window.

I hope this reply helps.

Regards,
Kharis

Hi Kharis

The CSS helps a lot, but there’s still one annoyance in that, for screen resolutions about 1600 x 1200, the menu flashes up on the right then switches to the left side (see https://website.cpcu.co.uk) when moving the cursor up and down. I hope I’ve explained that well enough! This happens with Firefox, Chrome and Edge.

On MS IE11, the menu doesn’t show at all, I know this browser is deprecated but there are a lot of people out there still using it!

Agreed that the problem with minimising/maximising the browser window is not how people would normally use the website, but this didn’t happen with v1.74, so I thought I’d flag it up, you never know, it might help you diagnose problems!

BTW, still one of the best themes out there for what organisations like our credit union require, keep up the great work!

same Problem here, I used the CSS, now it’s back to normal.
But will there be an update to do the right alignment without the css needed?
Best regards

• This reply was modified 4 years ago by thalakus.

Hi @cpcusteve,

for screen resolutions about 1600 x 1200, the menu flashes up on the right then switches to the left side (see https://website.cpcu.co.uk) when moving the cursor up and down. I hope I’ve explained that well enough! This happens with Firefox, Chrome and Edge.

I am sorry, I still can’t get it when checking your website. Can you take a screen recording video and upload it Google Drive, then link it here?

@thalakus,

But will there be an update to do the right alignment without the css needed?

I will pass this to our development team to check further. And surely, there will be a permanent fix for this if they exactly reproduce the issue. As of now, I only noticed it is a site specific issue.

Regards,
Kharis

Hi Kharis

See the attached video https://1drv.ms/v/s!AsOHF3QeIkc81AANICS5zlDAi0e6?e=XKDUvW. I think it’s self-explanatory, but let me know if you want any further help. As you can see, selecting the “Loans” or “Savings” menu option and moving right off the item causes the sub-menu to flash.

Regards
Steve

Hi @cpcusteve,

I am sorry, I can’t replicate the same issue on mormal installation of my test site running the latest Sydney theme (1.75).

Perhaps it is site-specific issue. But we’ll see in the future. And surely there will be a permanent fix for this if we can get the same.

Regards,
Kharis

Hi Kharis

How odd. If it helps, I’ve been experimenting with a staging site to see if anything makes any difference. Have tried the following:-

1. Deactivate all plugins
2. Change the no of items in the main menu at top, second and third levels
3. Remove all Additional CSS
4. Change fonts and font sizes

All with no apparent change in the flashing menu on the third sub-level. I’ll keep looking and give you an update if I find anything.

Hope your team can reproduce, and thanks for your help to date.

Regards
Steve

Hi Kharis

Having a bit of time on my hands (don’t we all with Covid?) I compared the 1.74 release with 1.75 and narrowed down the problem to the Sydney “style.css” file, line 857, which is

#mainnav:not(.mainnav.toggled) li:hover > ul {

The Cpanel editor reports that this is not valid CSS. I replaced it with the 1.74 equivalent which was

#mainnav li:hover > ul {

and the menu then worked correctly as with 1.74. I hope this will help you to fully diagnose and fix the code properly – there’s obviously a reason the change was made!! I’ll leave the unmodified 1.75 version on https://website.cpcu.co.uk so you can continue to see the problem and await an “official” bugfix.

Hope this helps

Regards
Steve

PS, this also cures the ‘menu not working at all’ problem with IE11!

I am seeing exactly this problem too.

Today updated to WP v5.7 and the problem persists.
I have used the CSS workaround suggested above by Kharis;

.site-header #mainnav ul li ul.sub-menu li ul.sub-menu {
  right: 100%;
  padding-top: 0;  
}

Site = https://www.krabi-divers-inn.com

Hi @cpcusteve,

The Cpanel editor reports that this is not valid CSS. I replaced it with the 1.74 equivalent which was

I can confirm that line is causing the issue because it takes priority over a different property. But that line is needed.

I’d recommend adding this CSS code to your website’s Additional CSS

#mainnav .sub-menu .sub-menu {
    left: 100% !important;
    padding-top: 0 !important;
}

Adding further, we got permanent solution for this and it will be available in the next theme update. Please be patient.

@deanes Thank you for sharing the code. Your site looks nice and I like it. Thank you for choosing Sydney.

Regards,
Kharis

Hi
Thanks for the update and comments on our site.
Your CSS code workaround functions OK.
We can wait for your next theme update.
regards

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi, I have the same problem with dropdown menus in firefox since updating to Sydney 1.76 on our page: https://www.feuerwehr-nagold.de/

As I can see, the site from @cpcusteve https://cpcu.co.uk/ is not working on my pc with firefox too. I can’t hover over the menu on his page.

I tried to add the custom css part and also changing the style.css as mentioned above, but both didn’t work.

Some of our visitors wrote us that our menu is broken and they can’t access some pages through the menu.

Is there anything else I can do to hotfix this without rollback the update with a backup?

Many thanks!

Hi @tuteplays

Strange, I’ve tried your site and, provided you only have dropdowns on the Abteilungen and Einsatze menu items they work fine in Chrome, Edge and Firefox for me. This isn’t a weird language problem is it? Is your Firefox at the latest version (87.0)?

You could also try clearing the cache, that sometimes fixes things.