Mega mnu not aligned.

[Gifts & Weddings]

Hi team

enjoying the theme very much and i was ready for the mega menu dive.

i created my mega menu. i downloaded the example from your mega menu used that to create mine, but whatever i do it looks great in gutenberg , butt on the ftont its totaly out of wack, its not aligned , can someone have a look or help me

i attached teh login credentionals for smooth and quick help
the menu for mega is called desktop mega menu have a look please

Danny

• This topic was modified 4 months, 1 week ago by Gifts & Weddings.

Hello,

I have checked your site and have not seen the mega menu in the header menu. There are only sub-items added.

Navigate to Appearance > Menu > Edit menu > Expand menu item and choose the HTML Block: https://ibb.co/8nyJKWym

Please check this manual:
https://xtemos.com/docs-topic/create-mega-menu/
https://xtemos.com/docs-topic/html-blocks-usage/

If you have faced an issue, could you please elaborate on your concern more with some useful screenshots for better understanding that demonstrate the problem, so we can understand and reproduce it on your website?

Best Regards,

Thank you for the answer the mega menu is not in use atm , and the problem is not that i dont know how to make a menu . the problem is dont understand is that how to align it , cause it looks good in gutenberg but on the front end the categories are not next to each other . so the aligning is the problem. i also told you the name of the menu so you good see it for yourself. caus this is a live site the mega menu is not in use now

check for yourself go to header builder and choose mega menu desktop for the menu in the bottom header

let me know

i atteched som images for expanation one is the front end and one from the gutenberg builder

Danny

Attachments:

You must be logged in to view attached files.

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site, and then check the issue. I am sure your issue will be solved. Then, activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists, then keep the 3rd party plugins deactivated and let me know so I can check and give you a possible solution.

Best Regards,

hi there

all plugins are deactivaded but the problem is still there so please have a look as soon is possible cause this is a live site and plugins ar not working now i need for my website

danny

Hello,

To investigate this properly without affecting your live website. Please try to create a Staging platform where you can test issues, enable/disable features/plugins, thus such changes will affect the main site. Also, share the WP login details of the staging site so I can further check on your staging site and troubleshoot the issue.

The article below will help you to create it: https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

Best Regards,

[Gifts & Weddings]

thank you for the quick responce

the staging is ready and you will find the login details in this message

Danny

• This reply was modified 4 months, 1 week ago by Gifts & Weddings.

Hello,

Thank you for providing access to the staging site.

I have further investigated the issue, and the problem is not related to plugins or the theme itself. It is caused by the way the Mega Menu content is structured inside the editor.

The alignment is not set up properly in the current HTML Block, which is why the columns look correct in Gutenberg but appear misaligned on the frontend.

For clarification, I created a new HTML Block and assigned it under the “Gelegenheden” menu item. This new Mega Menu is working correctly on the frontend without any alignment issues.

This confirms that the issue is related to the layout structure inside the Mega Menu content.

I recommend reviewing the column structure in your original HTML Block and comparing it with the new working one to see the difference in layout setup.

Best Regards,

i copied the gelegenheid example and it is still not aligned , i did exactly the sam e as the example every margin and padding etc is 1 0n 1. the only difference with the live site and staging site is that in the staging site all third party plugins ar e deactivaded and on the live site they ar all activated . makes me think its a plugin conflict

Danny

Hello,

Please try importing the same working HTML Block (the one from staging) into the live site and assign it to the Mega Menu.

After importing Clear all caches and check the Mega Menu alignment again

If the issue still remains on the live site while the same block works correctly on staging, this will confirm that the problem is caused by a third-party plugin or optimization setting on the live environment.

Best Regards,

i checked on the staging site and activaded all pluignis 1 by 1 and checked . on the staging site alle is good so no plugin conflict there. here is the funny thing . the next thing i did copied the example block to my live site and put it in the menu first row of the menu . saved it and not aligned again. then i placed the examplee block also on the last row of the mega menu and then all is alignd. very strange

Danny

Hello,

Thank you for testing

Since the block works correctly in the last row but not in the first row, this confirms it’s not a plugin issue. It’s related to how the first row of the Mega Menu is structured.

Most likely, the first row has a different container/column setting that affects alignment.

Please compare the row structure (container/column width settings) between the first and last row, as they are not behaving the same on the frontend.

Best Regards,

hi there they are an exact copy of each other so the settings ar al the same . and when i use two copy alingment is good

but when i only use 1 copey in the mega menu the aling is not correct , this behavour is both on live site and staging site

Danny

Hello,

Could you please share some useful screenshots for better understanding that demonstrate the problem, so we can understand and reproduce it on your website?

Best Regards,

first image i only use the block you told me to use under huwelijkscadeau , its not aligned between men and kids

if i put the same block under an other menu like gelegenheden and also under huwelijkscadeau its all good. so if use yours example only once its not aligned but when i put a second copy of the block under another menu its all good

the second image it shows the alignment is working correct but i have to put the same block under gelegenheden as extra block

Attachments:

You must be logged in to view attached files.

Hello,

I have checked your staging site and reviewed the Mega Menu under Huwelijkscadeau and Gelegenheden.

You mentioned that when the block is used only once it becomes misaligned. To verify this, I removed the Mega Menu from Gelegenheden and tested Huwelijkscadeau with the block used only once.

After removing it, the Mega Menu under Huwelijkscadeau remained properly aligned.
So the alignment is working correctly even when the block is used only once. Please clear your cache (including browser and any server cache) and check again.

See Screenshot for clarification: https://postimg.cc/wyX0p4sB

Best Regards,

hi there

i did exactly as you told me to

if i work on one mega menu block it affect the other so the whole setup i not workable , im telling you there is something wrong or with my mind or with the theme check the live site for me . i did al theblocks and on de last block huwelijkscadeau if i edit that block the last block is affected en everything is not aligned so

also th alignment looks good in the block builder but doesnt look good on the front page.

Danny

here are som e images from the block builder and the live site

Attachments:

You must be logged in to view attached files.

Hello,

I would like to clarify that this is not a theme-related issue. The alignment behavior is related to the design structure and development setup of the Mega Menu content itself.

For your clarification, I have created and configured a single HTML Block, properly structured the columns, and adjusted the alignment settings. With the correct layout structure in place, the Mega Menu displays aligned correctly on the frontend.

So the key factor here is how the HTML Block is structured (row/column settings and widths), rather than any issue with the theme itself.

Please review the structure of your block and ensure it follows the same setup. If needed, I can guide you through the exact configuration.

Best Regards,

ok i fixed it but had to use css

.wd-dropdown-menu .wp-block-wd-column {
flex-grow: 1 !important;
}

thanks for your help

Danny

Hello,

Sound’s Good!!
That your issue is resolved now.

Feel free to write back anytime. If you need further assistance, we are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts