Ability to use menus, e.g. XPlus Extra Menus (Simple Menus) in Mega Menus

[RinaldoParticipant]

It would make it much easier to create Mega Menus imho.

I would make it similar to the Footer Widget area, i.e. 3 or 4 columns, one menu in each column. Each menu item as a link with BG.

[scramblerModerator]

Sorry but I am not following, you will need to elaborate.
What are you calling Mega menu?
What exactly are you trying to do?

“I would make it similar to the Footer Widget area, i.e. 3 or 4 columns, one menu in each column. Each menu item as a link with BG.”
It sounds like you are describing a regular menu, where each menu Item opens a column of sub menus.

[RinaldoParticipant]

https://guide.weavertheme.com/mega-menus/

I ‘d like to show all options (of a product or product category) at once.

[scramblerModerator]

So what is wrong with a regular menu that would have The product as the main menu items, and all the options as sub menus of that?

[scramblerModerator]

By the way, Even though I dont understand what you hope to achieve with an extra menu shortcode inside a mega menu, I checked if it works, and it does but requires some custom CSS for it to display properly.

If you want to add an extra menu shortcode to a mega menu, here is what needs to be done. It may need more / different CSS depending on the type of menu, and exactly what you want to achieve.

• Add a Custom Link item to your menu, with # in the URL
• Open the New menu item
• In the Class box, add mega-menu
• In the description box, add your extra menu like the one below if you want a vertical menu

[extra_menu menu_name='yourmenuname' menu_style='secondary' menu_type='accordion']

then in the Theme Global Custom CSS Rule box, add the rules below to fix some of the CSS

.mega-menu .wvrx-extra-menu {display:block;left:0;}
.wvrx-menu ul.mega-menu li li {width:200px;}

 

[RinaldoParticipant]

Hi, Thank you.

I am sorry, can only work on it now.

I have only these field in my Custom Link:

URL
Navigation Label
Title Attribute

?

[scramblerModerator]

Open the screen options at the top of the Appearance > Menus page, and check the missing options so they become visible.

You are still not explaining why you cannot just use a regular menu??

[RinaldoParticipant]

What I would like to have is something like this: https://www.fool.com/

Please hover over the main menu items.

[scramblerModerator]

If you want to mix content and several vertical menus, then indeed using the mega menu makes sense, and it can be done with additional Custom CSS.

I will make a test for a block of content and two vertical menus and will post back syntax and CSS.

[scramblerModerator]

First, in the example you gave me, there is no need to use extra menu inside the mega menu, just set the mega menu description to 3 columns and place links in the last two. The HTML in the description box would look like

<div>
<div class="content-3-col">First column content. First column content. First column content. First column content. </div>
<div class="content-3-col">Second column content
<a href="https://forum.weavertheme.com/"> Link #1 </a>
<a href="https://forum.weavertheme.com/"> Link #1 </a>
<a href="https://forum.weavertheme.com/"> Link #1 </a>
<a href="https://forum.weavertheme.com/"> Link #1 </a>
</div>
<div class="content-3-col">Third column content <br/>
<a href="https://forum.weavertheme.com/"> Link #1 </a>
<a href="https://forum.weavertheme.com/"> Link #1 </a>
<a href="https://forum.weavertheme.com/"> Link #1 </a>
<a href="https://forum.weavertheme.com/"> Link #1 </a>
</div>
</div>
<div style="clear:both;"></div>

Remember to add mega-menu In the Menu Class box

Then in the Theme Custom CSS Rule box, you would add the rule below to set the width of the Mega menu
.wvrx-menu ul.mega-menu li {width:500px;}

Is there a reason that it would not be enough, and that you would want actual menu for the two columns of links ?

Note: Side question, what should happen on Mobile, as these will not look good in the slide open mobile menu….

[scramblerModerator]

If you do need to use extra menus instead of just links,  the HTML for the description box would look something like

<div >
<div class="content-3-col ">First column content. First column content. First column content. First column content. </div>
<div class="content-3-col ">Second column content
[extra_menu menu_name='yourmenuname' menu_style='primary' menu_type='accordion']
</div>
<div class="content-3-col ">Third column content <br/>
[extra_menu menu_name='yourmenuname' menu_style='primary' menu_type='accordion']
</div>
</div>
<div style="clear:both;"></div>

And the minimum Custom CSS would be below (it may need more, as the Main menu CSS interferes with the extra menu placed within…
.mega-menu .wvrx-extra-menu {display:block;}
.wvrx-menu ul.mega-menu > li {width:500px;}
.mega-menu .wvrx-menu {left:auto !important;top:auto !important;position:relative;}

[Author]

Posts