Return to previous page

Mega Menu - by Randley - on WordPress WooCommerce support

This topic has 147 replies, 31 voices, and was last updated 5 years, 6 months ago ago by Rose Tyler

Randley

Participant

July 13, 2016 at 00:54

Having difficulty figuring out how the mega menu works like the demos. Really like the furniture “HOT NEWS” works and how you add additional rows under a set amount of columns in the dropdown.

1) http://screencast.com/t/0wZzMKbZ Is there a screen shot you can show me/us of how the menu looks to add more then one row with multiple columns? And How do you keep and/or remove the lines between the columns.

2) http://screencast.com/t/S7YfwDsAH Another example of the vertical line removed and was wondering how you ad more space to the 4th column.

3) http://screencast.com/t/QN2V9M0fxa Was wondering how you were able to populate the 3 pictures in each column when hovering over the links in the first column.

Maybe a screen shot of how the menu should look?

Thank you!!

#133368 Copied Theme version: 1.2 WooCommerce version: 2.6.2

146 Answers

Randley

Participant

July 13, 2016 at 19:52

????

Please, contact administrator
for this information.

#133490 Copied

Olga Barlow

Support staff

July 14, 2016 at 08:28

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

#133532 Copied

Randley

Participant

July 18, 2016 at 22:46

Thank you for the response. My questions are in private. FYI: For the mega menu to populate, I have to save the menu first before any options become available.

Please, contact administrator
for this information.

#134011 Copied

Olga Barlow

Support staff

July 19, 2016 at 08:22

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

#134036 Copied

Randley

Participant

July 19, 2016 at 19:03

Sorry, I’m still confused on how the pictures will populate into the columns and how you can add another row, lets say for banner ads. (like in your demo)

#134097 Copied Theme version: 1.4

Olga Barlow

Support staff

July 19, 2016 at 19:55

Hello,

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

Regards

#134099 Copied

Randley

Participant

July 19, 2016 at 21:52

Info in private:

Please, contact administrator
for this information.

#134105 Copied Theme version: 1.4

Olga Barlow

Support staff

July 20, 2016 at 15:19

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

#134174 Copied

Lucy

Participant

December 29, 2016 at 07:11

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

#150466 Copied Theme version: x-store

Lucy

Participant

December 29, 2016 at 09:35

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

#150475 Copied Theme version: x-store

Olga Barlow

Support staff

December 30, 2016 at 15:40

Hello, @Lucy,

1) Go to Theme Options > General > Secondary menu > Enable Secondary menu.
2) Go to Appearance > Menus > Create secondary menu that will be displayed in All departments area and don’t forget to choose Secondary menu in Theme Locations.

Regards

#150598 Copied

ichpen

Participant

January 22, 2017 at 17:06

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.

#152708 Copied

Olga Barlow

Support staff

January 24, 2017 at 18:05

Hello, @ichpen

1) Could you provide me the link to your site? Do you create Main mega menu or Secondary mega menu? Are the vertical borders are missing?

2) To create shipping row we used Widget area http://xstore.helpscoutdocs.com/article/59-03-how-to-create-a-mega-menu
If you provide me temporary admin panel access I’ll be able to create such menu item as an example for you.

Regards

#152943 Copied

ichpen

Participant

January 25, 2017 at 00:24

Hi @Olga Barlow,

That would be very appreciated. Details in private.

Please, contact administrator
for this information.

#152960 Copied

ichpen

Participant

January 26, 2017 at 20:20

@Olga Barlow

Hi Olga, any joy with the above?

Thanks.

#153180 Copied

talalabd

Participant

January 26, 2017 at 22:20

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

#153184 Copied

Olga Barlow

Support staff

January 28, 2017 at 14:07

Hello, @ichpen

Sorry for the delay.
Images do not have borders for the column where they are. To remove border for the text column use “without-border” class for the 1st level of menu item.
If you prefer to create the layout where should be images first and last column – text column I would suggest you using widget area and static block to create images grid. I have changed the Brand item. Check, please. If this is not what you are looking for, please, provide me screenshot with the design you are trying to implement.

Regards

#153322 Copied

Olga Barlow

Support staff

January 28, 2017 at 14:13

Hello, @talalabd

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

Regards

#153324 Copied

ichpen

Participant

January 28, 2017 at 22:01

@Olga Barlow

Please, contact administrator
for this information.

#153355 Copied
Tagged: easy customization, mega menu, seo friendly, themes, woocommerce, wordpress
1 2 3 … 6 7 8

Viewing 20 results - 1 through 20 (of 147 total)