Mega Menu - by Randley - on WordPress WooCommerce support

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

  • Avatar: Crogers
    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!!

    146 Answers
    Avatar: Crogers
    Randley
    Participant
    July 13, 2016 at 19:52

    ????

    Please, contact administrator
    for this information.
    Avatar: Olga Barlow
    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

    Avatar: Crogers
    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.
    Avatar: Olga Barlow
    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

    Avatar: Crogers
    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)

    Avatar: Olga Barlow
    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

    Avatar: Crogers
    Randley
    Participant
    July 19, 2016 at 21:52

    Info in private:

    Please, contact administrator
    for this information.
    Avatar: Olga Barlow
    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

    Avatar: daka1788
    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

    Avatar: daka1788
    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

    Avatar: Olga Barlow
    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

    Avatar: ichpen
    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.

    Avatar: Olga Barlow
    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 https://www.8theme.com/documentation/xstore/video-tutotials/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

    Avatar: ichpen
    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.
    Avatar: ichpen
    ichpen
    Participant
    January 26, 2017 at 20:20

    @Olga Barlow

    Hi Olga, any joy with the above?

    Thanks.

    Avatar: talalabd
    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

    Avatar: Olga Barlow
    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

    Avatar: Olga Barlow
    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

    Avatar: ichpen
    ichpen
    Participant
    January 28, 2017 at 22:01

    @Olga Barlow

    Please, contact administrator
    for this information.
    Avatar: ronakvthakkar
    ronakvthakkar
    Participant
    January 29, 2017 at 18:17

    Hi,

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

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    January 31, 2017 at 18:04

    Hello, @ichpen,

    You are welcome! Feel free to ask if you need any other help with menu.

    Regards

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    January 31, 2017 at 18:06
    Avatar: Dwilo
    Dwilo
    Participant
    February 16, 2017 at 17:53

    Hi

    I’m having trouble with the menu not saving my changes.

    Please, contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 17, 2017 at 16:28

    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

    Avatar: Dwilo
    Dwilo
    Participant
    February 18, 2017 at 10:25

    Thank you for the reply.

    Please, contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 20, 2017 at 17:41

    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

    Avatar: Erwann
    Erwann
    Participant
    February 23, 2017 at 07:03

    Hi,

    Trying to make mega menu work, but I couldn’t…
    If I enable the mega menu option, I got this kind of displayed menu… http://prntscr.com/ecatn6
    And the way to have mega menu is different to the documentation or the video explanation as it seems to use visual composer.

    Need some help please…

    Regards

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 23, 2017 at 19:04

    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

    Avatar: Dwilo
    Dwilo
    Participant
    February 27, 2017 at 09:31

    Morning,
    Im still having trouble with my mega menu, I have increase the max input vars limit to 5000 and 7000 and it still won’t save.

  • 1 2 3 4 5
    Viewing 30 results - 1 through 30 (of 147 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.