Return to previous page

Problem with Mega menu - by Mentor_ - on WordPress WooCommerce support

This topic has 10 replies, 3 voices, and was last updated 3 years, 11 months ago ago by Rose Tyler

Mentor_

Participant

December 2, 2020 at 21:00

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.

Please, contact administrator
for this information.

#262313 Copied Theme version: 7.0.2 WooCommerce version: 4.6.0

9 Answers

Mentor_

Participant

December 3, 2020 at 05:35

I would like dropdowns to be like this

Please contact administrator
for this information.

#262330 Copied

Olga Barlow

Support staff

December 3, 2020 at 13:06

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

Mentor_

Participant

December 3, 2020 at 14:01

Yes full width regardless the columns of each element

#262440 Copied
Olga Barlow

Support staff

December 4, 2020 at 11:54
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
Mentor_

Participant

December 4, 2020 at 17:24

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

Please contact administrator
for this information.

#262703 Copied
Mentor_

Participant

December 5, 2020 at 11:23
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
Olga Barlow

Support staff

December 5, 2020 at 15:10

Hello,

Check now, please.

Regards

#262794 Copied

Mentor_

Participant

December 5, 2020 at 16:04

You are just the best! Thank you very much!

#262805 Copied

Rose Tyler

Support staff

December 5, 2020 at 16:14

Hello,

You’re welcome!

Regards

#262809 Copied
Viewing 10 results - 1 through 10 (of 10 total)