Hi ~ My submenus are pulling straight down over top of the main menu items, hiding them. I’ve disabled plugins and have done no CSS changes. I use Elementor, and when the menu is custom-placed, as on the homepage, it works fine. However, when I allow the theme to place it in its default position, it doesn’t work correctly (see here).
Please advise. Thank you!
Please disregard. I found this code and added it and it works.
#mainnav .sub-menu {
left: 0 !important;
}
#mainnav .sub-menu .sub-menu {
left: 100% !important;
}
Same problem here.
Should I add the CSS code you provided? At the end of style.css?
I did it the easy way - I just went to the Dashboard / Appearance / Customize / Additional CSS. If you have other CSS there, I would try it first at the bottom. If it doesn’t work, put it at the top (just my best guess!)
~ Good luck ~
I had the exact same issue when updating yesterday to Sydney 1.75. And your code is now happily residing in my custom css. All fixed.Thanks for your solution!
Hi @mikeknapp101,
Thank you for sharing the solution, that is highly appreciated.
This seems likely a site-specific problem as I can’t reproduce the exact same issue with my test site running on normal WordPress installation. But, surely we’ll take a look into it further. And there will be permanent fix if we can exactly get the actual problem from theme’s code.
Regards,
Kharis
aThemes Support
Please add me to the list of people experiencing this problem.
I see this issue when using Chrome and versions 1.75 and 1.74. It persisted after disabling all plugins.
I rolled back to version 1.73 and the problem on Chrome disappeared.
When I had 1.74 active I also tested the following and did NOT see the bad behavior:
I did not test Safari or Edge when I had 1.75 installed.
Addendum:
One of my users reported that with version 1.75 installed his menus did not drop down at all - only the top level could be selected. I realize that this is a different problem, but I’m not reporting it in a separate thread as rolling back to 1.73 resolved his problem as well. I am working to find out which browser his is using. I did not see this problem with Chrome, Edge, or Safari.
Hi @hrsms,
Can you provide a link to your website here, so I can inspect it directly?
If you want it to remain private, you can send me a direct message.
Regards,
Kharis
aThemes Support
Of course.
https://www.hrsms.org/Content/
The user that could not get any dropdown at all is using AOL Desktop Gold.
Thank you.
Hi,
Thank you for sharing the link.
I checked it and the issue is not appearing on my screen.
Can you take a screen recording, upload to a file hosting service like Google Drive, and link it here, so I can better identify the exact issue you’re having?
Regards,
Kharis
aThemes Support
If you want to take a look at my site too, here’s the link:
brau.cicop.it
You can disable from the browser the additional CSS suggested to fix the problem.
Thanks.
You could not see it because I had rolled back to 1.73.
In order for you to debug, I’ve upgraded to 1.75.
But so that my site is not in a broken state, I’ve added the CSS workaround suggested by others.
As “nopria” suggested, you can disable the custom CSS in the browser in order to see the problem.
Thanks for looking at this.
Hi @nopria,
Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.
#mainnav .sub-menu .sub-menu {
padding-top: 0 !important;
}
Regards,
Kharis
aThemes Support
I cannot speak for nopria, but I would rather not have to add CSS to work around a problem.
What else could be causing it, particularly if not affecting everyone?
There is no plugin interference. I had the same problem with all plugins disabled.
The browser? I, for one, only saw the problem with Chrome (and one of my users with AOL Desktop Gold, which I didn’t even know existed).
Actually padding-left did the trick, with the following additional CSS the behavior seems the same as the previous version of the theme:
#mainnav .sub-menu .sub-menu {
padding-left: 100%;
}
By the way, the issue showed up with Firefox too.
Let me know if in the next Theme version I can remove the additional CSS.
Thanks.
Hi there,
I found that the discrepancy lies in the main stile.css, starting line 857, modified with the last update 1.75 of Feb 17 last:
#mainnav:not(.mainnav.toggled) li:hover > ul {
opacity: 1;
padding-top: 10px;
visibility: visible;
left: auto;
display: block !important;
........................
This was in 1.74
#mainnav li:hover > ul {
opacity: 1;
padding-top: 10px;
visibility: visible;
left: auto;
display: block !important;
...................
My solution was:
or back to 1.74
or adjust the main style css: (padding-top:0 and left:unset):
#mainnav:not(.mainnav.toggled) li:hover > ul {
opacity: 1;
padding-top: 0;
visibility: visible;
left: unset;
display: block !important;
........................
Adjustment in Child style.css does not work properly with or without “:not(.mainnav.toggled)”
In my case the sub-sub is on the right and I can get it ok with:
#mainnav .sub-menu .sub-menu {
right:100% !important;
padding-top: 0 !important;;
}
The question is: was not(.mainnav.toggled) necessary?
Best, Rox
It seems that padding-left was only apparently the solution. I later discovered that menu buttons with submenu were not working any more.
Then I tried
#mainnav .sub-menu .sub-menu {
left:100% !important;
padding-top: 0 !important;
}
and now submenu show correctly and all buttons work.
Unfortunately I also made the small changes to style.css at line 859 and 861 suggested by rox, and now I get an “internal server error” when I go to Theme Personalization. Reverting those 2 lines to original didn’t solve the problem. Fortunately the site is still working and my hosting server error log is empty, but I can’t access Theme Personalization anymore.
Please investigate the issue introduced with 1.75.
How can I revert to to 1.74?
To check whether one of your plugins causes this issue, try disabling all plugins at once, run your test. If the theme’s customizer works fine, try re-enabling plugins one by one to find out specific plugin has the problem, and run your test in each.
Regards,
Kharis
aThemes Support
Done, the responsible plugin was “Enable jQuery Migrate Helper”. In the end, adding
#mainnav .sub-menu .sub-menu {
left:100% !important;
padding-top: 0 !important;
}
as additional CSS solved the problem for me.
Thanks all.
Regards.
Hello Kharis,
Is aThemes treating this as a bug, or do they expect the CSS to be a permanent solution?
a) I don’t consider the CSS a good permanent solution
b) The CSS is not working for my user who runs AOL Desktop Gold. He still gets no menu at all (just the headers at the top, no drop down)
The problem I saw with 1.75 was that when you did a mouse-over on the menu header, then mouse-over on a menu item, the sub-menu overlapped the main menu.
For my user on AOL Desktop Gold, the menus did not appear at all when the mouse is over a menu header item.
This is similar to what is described in this other thread: Sub menu doesn't work
Thanks,
Greg