Return to previous page

2nd level menu flyout - by Shezad - on WordPress WooCommerce support

This topic has 10 replies, 3 voices, and was last updated 4 years, 1 months ago ago by Olga Barlow

Shezad

Participant

January 15, 2021 at 18:53

Hello,

I am trying to create a flyout menu within the mega menu however I do not see any options to make this change. Would it have to be done via CSS or how could I accomplish this? Please see the screenshots below for further reference:

Currently looks like this= https://snipboard.io/KO0XEA.jpg
Menu is setup like this= https://snipboard.io/3AHOFg.jpg

Would like to have something like this (in the others section)= https://snipboard.io/tsxjbg.jpg
Closer look of what I am trying to accomplish= https://snipboard.io/1IYXgE.jpg

For more clarity on the issue, I am trying to make the Samsung Tablet section (which falls within the Samsung Section within the main menu) into a Flyout Menu so that I can fit more items into the menu without having it go down to the next line.

Regards~

#268636 Copied Theme version: 7.2.3

9 Answers

Rose Tyler

Support staff

January 16, 2021 at 11:35

Hello,

Thanks for using our theme.
There is no such possibility, unfortunately.

Check this demo https://xstore.8theme.com/elementor/demos/niche-market02/, https://prnt.sc/wtc5i7 https://prnt.sc/wtcb3g

Regards

#268695 Copied

Shezad

Participant

January 16, 2021 at 20:29

Okay I understand that is not a possibility. In that case, is there a way to bold or underline the text for the 1st menu item only?

Example of what I am trying to accomplish https://snipboard.io/uhJ3E5.jpg

#268741 Copied

Rose Tyler

Support staff

January 17, 2021 at 09:20

Hello,

Your site under maintenance mode, so we can’t check it.
Could you provide temporary wp-admin access?

Regards

#268764 Copied

Shezad

Participant

January 17, 2021 at 23:56

Sent admin access in private area

Please contact administrator
for this information.

#268849 Copied
Rose Tyler

Support staff

January 18, 2021 at 08:15
Hello,

Try to add the next code in Theme Options > Theme custom CSS:

.et_b_header-menu .nav-sublist-dropdown .item-level-1 > a { font-weight: bold; text-decoration: underline; }

Regards
#268871 Copied
Shezad

Participant

January 18, 2021 at 18:12

Hello,

Thank you for the CSS code, it seems to work well. I did have 3 followup questions however.

1) Is there a way to add a scroll bar to the menu so that it only scrolls the menu down while the menu is active?

2) Is there a way to adjust the font size of the menu items individually? For example make the underlined content bigger and the 2nd level items text + padding smaller? (I have created a “Test” menu section next to to the “Apple” menu section for what I am trying to accomplish. https://snipboard.io/I1QtFO.jpg

3) Is there a way to make the menu full width so that it adjusts automatically to any size screen? Currently on my laptop it looks like this https://snipboard.io/5oySia.jpg however on a few computers with a larger screen it shows up properly and on other computers it is coming off the screen.

Regards

#269001 Copied

Olga Barlow

Participant

January 19, 2021 at 11:12

Hello,

1) Could you, please, provide an example? I’m not sure that understand what exactly you want to implement.
2) Yes, you can edit the mega menu item font styles using element settings if you created it using Static Block and Elementor https://prnt.sc/x7c90r and https://prnt.sc/x7cf1o
3) there is no such option by default but we could help you to implement this by custom CSS. Create all the mega menus you need and reply back with this question once you finish. We’ll add the custom CSS to make the menu full width.

Regards

#269079 Copied

Shezad

Participant

January 19, 2021 at 17:41

Hello,

1) I am basically trying to implement a scroll bar in my menu for items so that the menu has a scroll bar https://snipboard.io/uGBJw0.jpg so I would like to have a scroll bar similar to this https://snipboard.io/VzviD9.jpg even if its not possible to have one per category having one scroll bar per menu will be sufficient (any scroll bar in other words)

2) Without using a static block is there a way to change the way the menu’s font? Or would that be done via CSS only?

3) I have created all the items required for mega menu, could you please provide me the CSS code to make the menu full width?

#269168 Copied
Olga Barlow

Participant

January 20, 2021 at 16:42
Hello,

1) We don’t have such option. Maybe look for third-party plugins for the mega menus that have such option.

2) There are no advanced options for the mega menu titles if you don’t use Static Block. In this case changes could be made by custom CSS only.

3) Add the following code to Theme Options > Custom CSS

@media only screen and (min-width: 992px) { .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 .et_column.pos-static ~ .et_column:last-child { position: static; } }

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