Return to previous page

Mega menu – fullwidth - by Crazystar

This topic has 7 replies, 3 voices, and was last updated 4 years, 8 months ago ago by Crazystar

Crazystar

Participant

April 12, 2021 at 15:30

Hello. How can I create fullwidth menu with boxed content ? Like here: https://ctrlv.sk/OPit

#283676 Copied Theme version: 7.2.7 WooCommerce version: Newest

6 Answers
Olga Barlow

Participant

April 12, 2021 at 19:49
Hello,

Add the below code to Theme Options > Custom CSS

@media only screen and (min-width: 992px) { .header-main-menu .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; } .header-main-menu .item-design-mega-menu, .header-top, .header-main, .header-bottom, .header-bottom .et_column { position: static; } }

Regards
#283740 Copied
Crazystar

Participant

April 13, 2021 at 07:31

Its working, but if menu is opened then I can’t click on navigation menu items, its not clickable..

#283769 Copied
Olga Barlow

Participant

April 13, 2021 at 17:23
Hello,

Go to Theme Options > Custom CSS find code below

.item-design-mega-menu .nav-sublist-dropdown:before { content: ''; display: block; position: absolute; left: 0; right: 0; height: 40px; bottom: 100%; }

and change
height: 40px; to height: 20px;

Regards
#283830 Copied
Crazystar

Participant

April 14, 2021 at 07:14
I added this code with 20px height to custom css, because it wasnt there.Before you sent me different code so I added this code with 20 px height there but same problem.

This is my custom css now:

.item-design-mega-menu .nav-sublist-dropdown:before { content: ''; display: block; position: absolute; left: 0; right: 0; height: 20px; bottom: 100%; } @media only screen and (min-width: 992px) { .header-main-menu .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; } .header-main-menu .item-design-mega-menu, .header-top, .header-main, .header-bottom, .header-bottom .et_column { position: static; } }
#283937 Copied
Rose Tyler

Support staff

April 14, 2021 at 07:21

Hello,

Delete this code http://prntscr.com/11d92p7 , you need to find this http://prntscr.com/11d93c2 and change it (Theme Options > Theme custom CSS (not Additional custom CSS) > Global custom CSS). If you can’t find it, provide us with temporary wp-admin access.

Regards

#283939 Copied

Crazystar

Participant

April 14, 2021 at 07:35

Its working, thank you guys. I’m closing this topic.

#283940 Copied
Viewing 7 results - 1 through 7 (of 7 total)