Mega Menu not center when choosing container or custom width more than 1200px

Hi,

When we are trying to create a mega menu of a custom width it’s not aligned properly to the center. I saw a few of your replies where you said to make it full-width and change the color to transparent. It helps to make the Megamenu center but you will not be able to click or hover over the left and right areas of the mega menu and a mega menu will be active until you hover over the bottom area. Please suggest any solution for that.

Attachments:

You must be logged in to view attached files.

Hello,

Is there any chance that you could give me access to the dashboard area so I can have a look at the settings on your website, please?

Thank you in advance.

Kind Regards

Hi

Attachments:

You must be logged in to view attached files.

Hello,

Yep, please send me dashboard access so I can properly investigate it.

Thank you in advance.

Kind Regards

Hi,

Hello,

In general, I see that your dropdown is situated in the center, could you please explain in more detail what exactly you want to change?

Looking forward to hearing back from you!

Kind Regards

Yes to achieve this, I created a full-width mega menu with a transparent background and applied the background color only to the container. However, there is an issue when the mega menu is active, and you navigate to the left or right of the theme where only the banner is visible; the mega menu is expected to close. This is the reason I’m questioning why the custom width of the mega menu isn’t perfectly centered. If this were to work, I wouldn’t need to employ a full-width mega menu.

Hello,

This problem is not related to centering, since fullwidth dropdowns are always centered and the distance from the left and right edge of the screen to the edges of your dropdown is also the same.

This problem is related to the custom code that you have created. By default, the fullwidth dropdown stretches to the entire width of the screen, and by making its background transparent, you have not removed this block and it is still available for manipulation with the mouse cursor, even though it is transparent.

In order to control the availability of a certain element for the mouse cursor in CSS, there is a special pointer-events property, and to change the behavior of the dropdown, the one you want, you need to make the “wd-design-full-width” block unavailable for the mouse and at the same time make it available only its internal “container”. This can be done using the following custom.

.wd-header-nav .menu-item.wd-event-hover .wd-design-full-width {
	pointer-events: none;
	padding-top: 0;
	margin-top: 30px;
}

.wd-header-nav .menu-item.wd-event-hover .wd-design-full-width:after,
.wd-header-nav .menu-item.wd-event-hover .wd-design-full-width > .container {
	pointer-events: auto;
}

.wd-header-nav .menu-item.wd-event-hover .wd-design-full-width:after {
	height: 30px;
}

Kind Regards

[Author]

Posts