Return to previous page

Full width dropdown menu - by Nuno Pereira

This topic has 19 replies, 5 voices, and was last updated 1 years, 8 months ago ago by 4SUP.DE

Nuno Pereira

Participant

September 24, 2020 at 11:30

I´m trying to make my dropdown menu full width (see image: https://ibb.co/6X9WqmG) but I can´t figure it out how. I´m using 4 columns menu

How i can i make full width when dropdown?

#252508 Copied Theme version: 7.0.1

18 Answers
Rose Tyler

Support staff

September 24, 2020 at 12:03
Hello,

There is no such option, but you can try to use custom CSS code to achieve the desired result. Add the next code in Theme Options > Theme Custom CSS > Custom CSS for desktop:
```
.item-design-mega-menu {
    position: static;
}
.header-top, .header-main, .header-bottom {
    position: static;
}
.item-design-mega-menu .nav-sublist-dropdown {
    left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
.item-design-mega-menu .nav-sublist-dropdown:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    bottom: 100%;
}
```
Regards
#252517 Copied
Mannix

Participant

March 9, 2022 at 20:33

2022 and still works like a charm. It’s a pity we don’t have an “full width” option for the mega menu dropdown.

#319294 Copied

Olga Barlow

Support staff

March 9, 2022 at 23:29

Hello,

We have mega menu full width option in Theme Options > Header builder > Menu > Mega Menu Dropdown Full-Width https://gyazo.com/38cb45de85b007e7f2e3ac860602e55d

Regards

#319298 Copied

Mannix

Participant

March 11, 2022 at 12:51

I totally missed that.

Anyways, with this option instead of the CSS, the mega menu disappears when leaving the menu item to try to click on the displayed layer.

Is there something else i’m missing?

P.S.: Where can I find detailed and updated documentation besides the videos?

#319386 Copied

Rose Tyler

Support staff

March 11, 2022 at 13:09

Hello,

Your site is under maintenance mode, so we can’t check it. Please provide temporary wp-admin access via the Private Content area.
Docs – https://www.8theme.com/documentation/xstore/

Regards

#319387 Copied

Mannix

Participant

March 11, 2022 at 13:14

Here you are

Sorry for the trouble but regarding the docs, I can’t find the megamenu full width part. Could you send me the specific link?

Thanks

Please contact administrator
for this information.

#319390 Copied

Rose Tyler

Support staff

March 11, 2022 at 14:35

Hello,

mega menu disappears when leaving the menu item to try to click on the displayed layer.

– Theme Options > Header builder > Main menu > Computed Box For The Menu Item > padding top and bottom 16px

Sorry for the trouble but regarding the docs, I can’t find the megamenu full width part. Could you send me the specific link?

– Theme Options > Header builder > Menu > Mega Menu Dropdown Full-Width. There is no info about this in docs, but as ai can see you have found that option already – https://prnt.sc/7XL2cNU9pAcX

Regards

#319399 Copied

Mannix

Participant

March 11, 2022 at 14:42

Works like a charm.
Thanks for the wonderful support!

P.S.: I found the option because you pointed it to me earlier, if not I would’ve been lost!

#319400 Copied

Rose Tyler

Support staff

March 11, 2022 at 14:52

You’re welcome!
Have a nice day!

Regards

#319401 Copied

4SUP.DE

Participant

March 24, 2023 at 18:33

Hi, I have a problem with the full width display of the SUB Mega Menu. The background color is not added to the left of the menu.
regards,
Norbert

#351148 Copied
Tony Rodriguez

Support staff

March 25, 2023 at 06:07
Hello @4SUP.DE,

We kindly request that you copy and paste the following CSS code to Xstore >> Theme Options >> Theme Custom CSS >> Global CSS. After doing so, please clear your browser cache and check back to your site.
```
.nav-sublist-dropdown .container {
    margin-left: 0 !important;
}
```
We thank you for your cooperation and look forward to hearing from you.

Best Regards,
8Theme’s Team
#351169 Copied
4SUP.DE

Participant

March 25, 2023 at 07:19

Ok, the margin problem is solved. Many thanks for the help.
I have still one question. In mouse hover mode, the sub menu pops up briefly when I change the menu tabs. How can I solve this?

#351178 Copied

Tony Rodriguez

Support staff

March 25, 2023 at 08:21

Hello @4SUP.DE,

We apologize for not being able to fully comprehend your issue. Could you please provide more information, such as screenshots or a video clip, so that we can better understand the issue and provide assistance?

Thank you for your cooperation.

Best Regards,
8Theme’s Team

#351181 Copied

4SUP.DE

Participant

March 26, 2023 at 09:08

Hi, I drew a video sequence for you.

Please contact administrator
for this information.

#351267 Copied

Rose Tyler

Support staff

March 26, 2023 at 10:03

Hello, 4SUP.DE,

Thank you for the video.

We apologize, but we are still unable to understand the issue and the desired outcome. Could you please provide a more detailed description of the desired result?

Kind Regards,
8theme team

#351274 Copied

4SUP.DE

Participant

March 27, 2023 at 12:20

When you hover over the main navigation, for example on “SUP Board”. Then the Mega Menu jumps down and up again. I would like to avoid that.

#351407 Copied
Rose Tyler

Support staff

March 27, 2023 at 13:38
Hello, 4SUP.DE,

Thank you for your response.
We suggest that you add the following code to the Theme Options > Theme Custom CSS:
```
.nav-sublist-dropdown {
    animation: none !important;
}
```
Kind Regards,
8theme team
#351417 Copied
4SUP.DE

Participant

March 27, 2023 at 15:43

Great, that worked, thanks for your support 🙂

#351434 Copied
Viewing 19 results - 1 through 19 (of 19 total)