Return to previous page

Topic: Problem with Mega menu - by Mentor_

Mentor_

Participant

December 2, 2020 9:00 pm

I am creating a mega menu with static blocks and it seems that there is some js that is calculating smt and injects style that moves the dropdown to the left. I want all dropdowns of all nav elements to take the same space and start from the beginning of first element.
Site URL: hidden
Theme version: 7.0.2
WooCommerce version: 4.6.0

Content is visible for topic creator and
support staff only.

#262313 copied to clipboard

Mentor_

Participant

December 3, 2020 5:35 am

I would like dropdowns to be like this

Content is visible for topic creator and
support staff only.

#262330 copied to clipboard

Olga Barlow

Support staff

December 3, 2020 1:06 pm

Hello,

Do you want to make the mega menu also full-width even if it includes the 1 column or just to show it from the start of the parent menu item http://prntscr.com/vv05o8 ?

Regards

#262413 copied to clipboard

Mentor_

Participant

December 3, 2020 2:01 pm

Yes full width regardless the columns of each element

#262440 copied to clipboard
Olga Barlow

Support staff

December 4, 2020 11:54 am
Hello,

Add below code to Theme Options > Custom CSS

@media only screen and (min-width: 992px) { .site-header .item-design-mega-menu .nav-sublist-dropdown { left: 0 !important; margin: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; transform: none !important; } .item-design-mega-menu, .header-top, .header-main, .header-bottom, .header-wrapper .header-bottom .et_column { position: static; } }

If it does not help then provide us with a link to your site and temporary WP Dashboard access.

Regards
#262620 copied to clipboard
Mentor_

Participant

December 4, 2020 5:24 pm

No, it adds full width but not limited to the header, i uploaded the staging site to a url of mine to give you access

Content is visible for topic creator and
support staff only.

#262703 copied to clipboard
Mentor_

Participant

December 5, 2020 11:23 am
With these changes to your code the visual result is exactly what i need

@media only screen and (min-width: 992px) { .site-header .item-design-mega-menu .nav-sublist-dropdown { left: 20em !important; margin: 0 !important; right: 0 !important; width: 100% !important; max-width: 70% !important; transform: none !important; overflow:scroll; } .item-design-mega-menu, .header-top, .header-main, .header-bottom, .header-wrapper .header-bottom .et_column { position:static; } }

The problem is that the dropdown won’t stay open when i hover.

You can see it live on the link and credentials i provided you in my previous post.
Thank you in advance
#262767 copied to clipboard
Olga Barlow

Support staff

December 5, 2020 3:10 pm

Hello,

Check now, please.

Regards

#262794 copied to clipboard

Mentor_

Participant

December 5, 2020 4:04 pm

You are just the best! Thank you very much!

#262805 copied to clipboard

Rose Tyler

Support staff

December 5, 2020 4:14 pm

Hello,

You’re welcome!

Regards

#262809 copied to clipboard