header-footer-elementor
header-footer-elementor copied to clipboard
Sub-menu gets hidden if Overflow is set to Hidden to avoid horizontal scroll
Describe the bug:
My website was getting a horizontal scrollbar and I managed to fix it by setting the Overflow to Hidden for the header section which contains the main menu. But doing so, the sub-menu items get hidden under the first section of the page. Setting the z-index of the header to a very high value of say 999 also doesn't fix the issue.
To reproduce:
- On Wordpress dashboard, go to 'Appearance', 'Elementor Header and Footer Builder'.
- Under the Site Header, click on 'Edit with Elementor'
- When the Header opens, I can see a horizontal scrollbar on the bottom which I want to remove. I click on 'edit section' for the header and set Overflow to Hidden. When I test the website after clearing the cache, the horizontal scrollbar is eliminated but the sub-menu items get partially hidden under the first section of any page. Setting z-index of the Header section to the highest value also doesn't fix the problem.
- See screenshots below.
Expected behavior:
The sub-menu items should not be hidden and horizontal scroll bar should also not appear.
Screenshots:
Isolating the problem:
- [x] This bug happens with no other plugins activated
- [ ] This bug happens with a default WordPress theme active
- [x] I can reproduce this bug consistently using the steps above
WordPress version:
Version 6.0
Elementor version:
Version 3.6.5 (Free version)
Hello @lsdssindia
I can see the horizontal scroll bar is appearing because the sub menu in the last menu item is extending the page. No need to set overflow on elementor section. Use the below small CSS snippet to fix the extending of last sub menu:
.hfe-nav-menu nav ul.hfe-nav-menu li:last-child ul.sub-menu {
left: unset !important;
right: 0;
}
Hi @lsdssindia We hope the solution provided earlier has successfully resolved the issue you were facing. Since we haven't received any further updates or responses regarding this specific issue, we will be marking this thread as "resolved" due to inactivity. Please be aware that you are more than welcome to initiate a new thread if you require any additional assistance or have further questions related to our plugin or any other matter. Thank you for your understanding and continued support.