Mega Menu with brand Dropdown needs to center and make transparent side gaps

Hello WoodMart Support Team,

I am building a Mega Menu for my store’s brands using the native WordPress Appearance -> Menus structure.

My Setup:

Top-level menu item Design is set to: “Set sizes”.

Sub-items are arranged into 6 columns.

My Goal:
I want this dropdown card to be fully responsive. It should be perfectly centered horizontally on the screen, and always maintain a consistent gap (e.g., 15px – 20px) from the left and right edges of the browser window, regardless of the screen size or zoom level, the background of the website should be visible through these gaps. – just like on picture 4.png.

My current Mega Menu for brands is on picture 3.png

The Issue:
When I try to center the menu using custom CSS (left: 50%; transform: translateX(-50%);), it doesn`t work. On smaller screens (e.g., 13″ laptops) or when the browser is zoomed in, the menu doesn’t scale down to keep the side margins. Instead, the left side of the menu gets pushed out of the viewport and is cut off.

I have attached screenshots showing the desired layout and the cut-off issue.

Thank you in advance for your help!

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

below are private details

Hello,

By the way, we have one quick question we’d really appreciate your help with. 😊

Where did you first hear about WoodMart? We’re trying to better understand how customers discover WoodMart, and your answer is extremely valuable to us. It takes just one click: https://tally.so/r/rj8qWl

Thank you so much for your help! 🙏

Now, regarding your request to make like the screenshot, please add it under Theme Settings > Custom CSS > Desktop CSS.

.whb-row .container,
.whb-row .whb-flex-row {
    position: relative !important;
}

.wd-nav-header > li,
.wd-nav-main > li {
    position: static !important;
}

.wd-dropdown-menu.wd-design-sized,
.wd-dropdown-menu[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Best Regards

[Author]

Posts