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

[Rinaldo]

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.

[scrambler]

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.

[Rinaldo]

Mega Menus

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

[scrambler]

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?

[scrambler]

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;}

 

[Rinaldo]

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

?

[scrambler]

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??

[Rinaldo]

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

Please hover over the main menu items.

[scrambler]

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.

[scrambler]

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….

[scrambler]

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;}

[Rinaldo]

Hi, Thank you very much. Cant get it to work though.

https://www.irinaafrica.com/    Menu item TEST, custom links. I set it to 4 columns.

Added mega-menu in class and .wvrx-menu ul.mega-menu li {width:800px !important;}

Also tried with .secondary-menu .wvrx-menu ul.mega-menu li {width:800px !important;}

One issue appears to be the positioning.

 

[scrambler]

This reply has been accepted as the best answer.

There is no such class as content-4 col, so if you are going to use that to create 4 columns, you need to define the rule for it.

The CSS to add to define the 4 column class is described in the article below

Responsive Columns and Widgets

You will also need to shift the sub menu left by modifying the original  rule as below

.wvrx-menu ul.mega-menu li {width:800px !important; left:-600px;}

[Rinaldo]

reduced to 3 columns, works.

Thank you!!

 

[Rinaldo]

Hi,

One more question please:

Is it possible to have two functions executed, i.e. can I have a shortcode and a link in this menus with # in the url and the code in the description.

What I mean is one menu item, with a short code and link, and both are executed with one click?

Thank you very much!

 

 

[Weaver]

I’m not sure I totally understand you question, but any content in a menu item is fully “expanded” before the actual menu item is clicked by an end user. In other words, the content of the menu text field is processed through the WordPress “do_shortcodes” function as part of generating the menu item’s final html output when generating the menu on the output page.

I’m not 100% sure if you can nest shortcodes in a menu, but combining a link and a shortcode should produce the expected output

[Author]

Posts