Mega menu (2)

Hey Mariarita,
In #1 your second three items, so the items are centered, try adding a fourth column to line up with the first row.
#2 GIORNATA MONDIALE DELLA PSORIASI fills the space because the text is long, the text length doesn’t change the column width.
#3 to line the items try this css and add the same number of items to the last row:

 .avia_mega_div.avia_mega6.twelve.units .three.units {
    max-width: 290px !important;
}

Best regards,
Mike

Hi,
Would you like CERCA IL CENTRO to be highlighted at all times, or only when on that page?
Please include a link to your page.

Best regards,
Mike

Hi,
Please see our documentation: Add Images to mega menu
and create a new column in the mega menu with the image.

Best regards,
Mike

Hi,
Please link to your page so we can examine.

Best regards,
Mike

Hi,
Sorry I thought you were working on a new site, can you add the image in the mega menu so we can help adjust it with css.

Best regards,
Mike

Hi,
OK, please add the image to the correct mega menu using the documentation: Add Images to mega menu and then we can try to help adjust with css like you example image.

Right now I don’t see any of your mega menu items in this format, they seem to be using title headings:

you will need to adjust so you only have three columns and the fourth one for the image:

Best regards,
Mike

Hi,
Thanks for your patience, currently your menu has three rows which are separate div’s and there is not a way to span them so the image can be centered into all three:

Try adjusting it so you have one row with the three headings and the image and add the links under them like in your example site:

this should make the image larger and centered.

Best regards,
Mike

Hi,
It looks like you still have two rows, please move the second row up so you only have one row:

Best regards,
Mike

Hi,
I tried to recreate the mega menu like your example on my demo site following the steps above and this was my result:

This is the menu structure in the backend:

Try to change your menu like this.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #header .mega_menu_title,
#top #header .mega_menu_title a {
    font-size: 12px;
}

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .header_color .avia_mega_div,
#top .header_color .main_menu ul ul,
#top .header_color .main_menu .menu ul li a {
	background-color: transparent;
}

Best regards,
Mike

Hi,

Thank you for the update.

Try to replace the css with the following code:

#top .header_color .avia_mega_div,
#top .header_color .main_menu ul ul,
#top .header_color .main_menu .menu ul li a {
	background-color: rgba(255,255,255,0.5);
}

Best regards,
Ismael

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike