Removing extra white space from mega menu dropdown content left and right side

Please have a look at the attached screenshot.

This is the development URL of the website – https://theboobooclub.coming-soon.site/

I have created a mega menu item named kids in the header. However the megamenu is set to full width, but there’s some extra white space coming on the left and right-hand sides of the mega menu dropdown content. I have marked the extra space using a black marker.

I just don’t want to keep that extra spacing. Only the mega menu content will be there, those spaces should be removed.

Even If I keep the mega menu width fixed such as 1400px or 1450px, the same white space comes on the right and left-hand side of the mega menu dropdown content.

Please give me some CSS to get rid of it, thanks.

I have attached the image below for your referrence.

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.wd-dropdown-menu.wd-design-full-width .container {
max-width: 1600px;
}

Best Regards

I added the CSS, and the width of the mega menu container got increased which makes it look weird. However, there is still a little white space on the left and right sides. White space got reduced, but not gone away.

So what I have done is, I have now set the mega menu width to “custom – 1200px” instead of “full width”. But if I do so then the mega menu section content gets aligned to the left side of the screen. Look at the attached image below for your reference.

I want the mega menu content to be center-aligned with the screen! how do I achieve this?

Need some CSS.

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop Area under Theme Settings >> Custom CSS.

.wd-dropdown-menu.wd-design-sized {
    left: -230px !important;
}

Best Regards

[Author]

Posts