How to set the megamenu width to full width so that it automatically adapts to the page. If I set the menu item property to default, the menu will break as in screenshot 1, if I set it to full-width, the megamenu will be 800px wide. I want to achieve what is on screen 2
Static mean in css width will be set for example to 900px, i want set it to be responsive, for example if i open IT on 1000px monitor width will be set to 800px if i open it on 2000px monitor width will be set to 1600px. I want make this auto adjustable
Try to add the code below into the “Global Custom CSS” area in Theme Settings -> Custom CSS.
/* Default mega menu width */
.wd-nav-vertical .wd-dropdown-menu:is(.wd-design-full-width,.wd-design-aside) {
--wd-dropdown-width: 80%; /* Set a default width percentage */
}
/* For screens wider than 1000px */
@media (min-width: 1000px) {
.wd-nav-vertical .wd-dropdown-menu:is(.wd-design-full-width,.wd-design-aside) {
--wd-dropdown-width: 800px !important;
}
}
/* For screens wider than 2000px */
@media (min-width: 2000px) {
.wd-nav-vertical .wd-dropdown-menu:is(.wd-design-full-width,.wd-design-aside) {
--wd-dropdown-width: 1600px !important;
}
}
This code sets the default width to 80% of the container width, then overrides it with specific pixel values for screens wider than 1000px and 2000px. You can adjust the percentages and pixel values as needed to suit your design.
.
