Mega Menu - by Randley - on WordPress WooCommerce support

Hello,

Sorry for the delay in answering. We had some problems with server and I couldn’t send you necessary screenshots to explain in details.

1) This type of menu is MegaMenu.
To create mega menu follow the step below:
a) Go to Appearance > Menus and create menu or just edit existing, drag and drop the menu items where you want them. If you want Megamenu then you need drag and drop your pages or custom link to have subitems with subitems. First level – items that appear in primary menu line. 2-d – columns titles/images or widget areas, 3-d level column items. Save your menu structure. Only after menu saving XStore options appear. Select MegaMenu design for the first level and munber of columns you want to have in the first row.
See screenshot of menu structure that we have for Home item
http://prntscr.com/bspbzd

If you need to add image or custom widget area (Shipping Row on our demo) use custom links. See here http://prntscr.com/bspd24

b)For the Image menu item select Design – Image or Image without spacing (depends on your needs), disable title and upload image. You may also change the width of the column within your menu width. For example 4 columns – is 100% and you want image takes 40% instead of standard 25%.

c) To create the last row use Custom Links and select widget area. Set column width – 100%. You may use either existing widget areas or create the custom one (Appearance > Widgets https://www.8theme.com/demo/docs/xstore/#theme_settings_45_widgets_amp_custom_widget_areas ). Add 8theme – Posts widget to display posts/projects like we have in Portfolio item or 8theme – Static Block to show Static block.

2) To remove vertical line use css class without-border or select design Image without spacing for your image, this type of design does not include border http://prntscr.com/bsph4s
To add more space. This Mega Menu has 4 columns, but we selected 5 columns design for the first level and just changed the width of every column.

3) These are posts of blog subcategories. Go to Posts > Categories > create Category with subcategories. Then add this category into menu and select design typeSubcategories + Posts http://prntscr.com/bspnhh

Regards

Hello,

1) You should have Post Category with subcategories http://prntscr.com/buol07
2) Add category in your menu http://prntscr.com/buoltl

Unfortunately, I see some bug with this option and “Header wide” option. We’ll fix it in next theme update!

Regards

Hello,

Could you, please, provide the image with design of megamenu that you need. I’ll check and help you to create it.

Regards

Hello,

Check your menu. I have added some images from you media gallery but you can change them.
Here is an example of your menu structure http://prntscr.com/bv9gak

Regards

Dear Olga,
I installed the electronic version of the x-store. I’d like to know to make the drop down menu looks exactly like the one in demo.

what demo looks like: http://prntscr.com/dp6b1r
what our’s looks like http://prntscr.com/dp6c23
In the demo’s menu, it contains categories within the mega menu,
Please let us know how to make it like that?

Thank you

Lucy

Good write up but a couple of unanswered questions for me. As per above:

1. My current mega menu doesn’t show any borders, I’d like to show some, is there a CSS class I should be including to do this for each sub-menu item?
2. “If you need to add image or custom widget area (Shipping Row on our demo) use custom links. See here http://prntscr.com/bspd24.” — Is the custom shipping row an image? It doesn’t look like it so wondering how you achieved it as the above explanation didn’t cover this.

Thank you.

Hi @Olga Barlow,

That would be very appreciated. Details in private.

Hello ,
I have an issue with my website menu
The label are showing twice in my sub menu pages
Screnshot :
http://prntscr.com/e0s10a

Hello, @talalabd

This is menu item description http://prntscr.com/e1f418
Either remove item description in menu settings or hide item title.

Regards

Hi,

I am not able to add mega menu option on the website. Please help.

Hello, @ronakvthakkar

Have you watched our video tutorial https://www.8theme.com/documentation/xstore/video-tutotials/03-how-to-create-a-mega-menu/ or read documentation https://www.8theme.com/documentation/xstore/menu-set-up/mega-menu/

Regards

Hello, @Dwilo,

1) If you can’t save the menu it means that you reached max input vars limit. Please try to increase max input vars http://prntscr.com/by3tat and check if it helps.

2) The number of columns for the footer you can choose in Theme Options > General > Footer. If you want footer with custom width of columns then I would recommend you to create custom footer using Static Block https://www.8theme.com/documentation/xstore/support/static-blocks/ After that in Theme Options > Footer > choose 1 column and go to Appearance > Widgets > add 8theme Static Block widget into footer widget area.

3) To remove sidebar for the cart page go to Pages > edit cart page and disable sidebar in 8theme Layout options.

Regards

Hello, @Dwilo,

You need to inspect all the menu elements and change the styles for the appropriate media queries, for example http://prntscr.com/eb6bwh You need to hide some elements beginning from 1200px and at the same time show other elements beginning from 1200px, change it’s position styles, etc.

Regards

Hello, @Erwann,

You can use VC only to add some additional elements. But to create simple mega menu you don’t need VComposer. Just create multilevel structure (at least 3 level for the mega menu item) and choose mega menu design type for the 1st level. If you provide me temporary admin panel access and screenshot of the menu that you want to implement I could explain you in details how to achieve this.

Regards