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

[Author]

Posts