Return to previous page

How to create a mega menu exactly like the DEMO page, is there a tutorial pls?

This topic has 11 replies, 2 voices, and was last updated 6 years ago ago by Rose Tyler

Graham

Participant

April 6, 2018 at 07:51

Hi there

I’m just wondering if I am able to create a exact same Mega Dropdown menu like what the demo page has?
Here is the screenshot for example: https://ibb.co/iSJJ1c

I do have searched on Google and viewed the Youtube video here @ https://www.youtube.com/watch?v=ShxeT_7SGfI&t=92s, however, I’m still having much confusion about the static block settings etc.

1. Could you pls kindly let me know if there’s a complete tutorial? Or import an example static block in my WordPress which I can learn and copy?

2. By the way, can you let me know how to change the mega dropdown menu background color and title text color?

3. Last one, I didn’t find the place where to change the hovering color of the main menu title items, could you point it out?

Thanks very much.
Regards
Graham

Please, contact administrator
for this information.

#190457 Copied Theme version: LATEST WooCommerce version: Latest Version

10 Answers
Rose Tyler

Support staff

April 6, 2018 at 15:25
Hello,

1. Please read our documentation also https://xstore.helpscoutdocs.com/article/27-mega-menu
here are screenshots from the demo – http://prntscr.com/j1rhtx http://prntscr.com/j1ria6 http://prntscr.com/j1rja3
I’ve created “Shipping Row Menu” static block on your site.
2. Looks like we have a bug with Menu Dropdown background option in Theme Options > Styling >
Navigation. Please use, as a temporary solution, custom css code:
```
.nav-sublist-dropdown {
    background-color: #390A54;
}
.nav-sublist-dropdown ul > li .nav-sublist ul {background-color: #390A54 !important;}
.nav-sublist-dropdown ul > li .nav-sublist ul li a:hover {
    background-color: #460c67 !important;
}
```
also delete this one https://prnt.sc/j1rbjs
The problem will be fixed in next theme update.
Sorry for the inconvenience.
Menu text color can be changed in Theme Options > Typography > Navigation
3. Theme Options > Typography > Navigation > Menu 1 level hover (active)

Regards
#190539 Copied
Graham

Participant

April 8, 2018 at 03:54

Thanks very much

Just a few more quick question,

1. Could let me know how can I change the font family, size and color of the Mega submenu items?

2. And I suppose when the problem is fixed with the next theme update, I will need to remove the temporaty CSS ,right?

3. By the way, I do have attached the “Shipping row” Static block to the “Shop” Main menu, but it seems nothing worked. Please suggest do I have to change anything else?

Screenshot description: https://ibb.co/bLLTMc

Best Regards
Graham

#190579 Copied

Graham

Participant

April 9, 2018 at 06:23

Update: The No.3 “Static Block” issue resoloved.
Please just have a view of the problem 1 and 2.
Thanks! 🙂

#190590 Copied

Rose Tyler

Support staff

April 10, 2018 at 08:01

Hello,

1. Theme Options > Typography > Navigation > Menu 2 level/Menu 3 level and drop-downs
2. Yes, please delete the code or contact us after the next theme update.

Regards

#190633 Copied

Graham

Participant

April 10, 2018 at 08:57

Thanks! It worked perfect

Just 2 places need to be fixed:
1. The background color of menu items seems to be different.
2. The word spacing between the menu item and “Sale” tag

This is the screenshot: https://ibb.co/fPih1c

Thanks very much for your help!
Regards

#190650 Copied

Rose Tyler

Support staff

April 10, 2018 at 13:59

Please clear cache and check now.

Regards

#190718 Copied

Graham

Participant

April 11, 2018 at 14:24

Hi

1. Thanks! The background issue fixed now.
2. But the spacing between the “menu item” and “tag” still seems too narrow.
https://ibb.co/ia6jzx

I do have cleared the browser cache a few times by Ctrl_F5

Please advise.

Thanks and Regards

#190843 Copied

Rose Tyler

Support staff

April 11, 2018 at 14:47

Hello,

1. You’re welcome!
2. http://prntscr.com/j3tqf2 Please let me know what device and browser do you use?

Regards

#190850 Copied

Graham

Participant

April 11, 2018 at 17:08

Hi, Tyler

I’m using the Google chrome on a widescreen display of about 2560 x 1440.
I think it will be alright if there’s no problem on your side, most people would not use the screen that wider.

Thanks very much for your time! 🙂
Regards
Graham

#190869 Copied

Rose Tyler

Support staff

April 12, 2018 at 08:35

Hello,

You’re welcome!
Let us know if you need any further assistance.

Regards

#190903 Copied
Viewing 11 results - 1 through 11 (of 11 total)