Large categories menu in header
-
Hello,
In header I have categories menu with 10 items in it when i bring cursor to icon dropdown menu comes out, regularly dropdown menu opens from icon to down and right, last dropdown which stands furthest on the right side opens same as previous ones but because its too near to right edge, it goes over screen and we have similar situation with bottom edge, when i open dropdown which has many categories and that categories have their own subcategories which is opened by hovering main category, new dropdown box appears and it starts from the same height where the main category is and if this subcategories dropdown has a long list, it has a chance to go over bottom edge so i want to keep it inside screen so when it doesnt fit in it should start from upper than its main category.
chatgpt helped me with JS to keep furthest right categorie inside but couldnt help with bottom edge.
I have added images.
I know about mega menu, but dont want to use it, because it doesnt have dropdowns and some of my categories have subcategories, some dont, so they will look different in mega menu, I want to keep style.
Attachments:
You must be
logged in to view attached files.
Hello,
To keep your dropdown structures nicely contained inside the screen limits, please add the following CSS rules into Theme Settings > Custom CSS. Change the code as per your requirements.
/* Force the last menu dropdown to align and expand from the right edge inward */
#menu-item-5463 .wd-dropdown-menu {
left: auto !important;
right: 0 !important;
}
.wd-nav .sub-sub-menu {
top: auto !important;
bottom: 0 !important;
margin-bottom: -10px; /* Aligns smoothly with the hover baseline */
}
Best Regards
thanks for trying but it just took each dropdown upward and now it goes over upside edge, also didnt fix right side. I tried hard using chatgpt, got some fix but have flashes on hover of dropdowns which dont have sub-subcategories, but the ones that have sub-subcategoreis are good now. Ill share the code chatgpt gave me please look at it if you can help. I ve attached word file with css and js in it.
Attachments:
You must be
logged in to view attached files.
Hello,
Sorry to say, but additional code customizations, such as custom JavaScript modifications, fall outside the scope of theme support.
In your case, the header contains a large number of menu items with multiple sub-menus, and due to the overall menu width, the last dropdown and third-level dropdowns are getting pushed outside the visible screen area.
To properly resolve this within the theme structure, we recommend one of the following approaches:
– Move some menu items to a bottom header row, or
– Convert larger sub-menus into a Mega Menu, which provides more horizontal space and prevents dropdown overflow issues.
You can follow the official guide for setting up a mega menu here:
https://xtemos.com/docs-topic/create-mega-menu/
Best Regards
.
