Home › Forums › Feature Suggestions › Ability to use menus, e.g. XPlus Extra Menus (Simple Menus) in Mega Menus
- This topic has 17 replies, 3 voices, and was last updated 3 years, 6 months ago by
Rinaldo.
-
AuthorPosts
-
August 9, 2017 at 20:46 UTC - Views: 77 #50736
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.
August 9, 2017 at 20:52 UTC - Views: 86 #50737scrambler
ModeratorSorry 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.August 9, 2017 at 21:25 UTC - Views: 74 #50738Rinaldo
ParticipantI ‘d like to show all options (of a product or product category) at once.
August 9, 2017 at 21:59 UTC - Views: 70 #50739scrambler
ModeratorSo 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?
August 9, 2017 at 23:02 UTC - Views: 85 #50742scrambler
ModeratorBy 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;}August 14, 2017 at 20:28 UTC - Views: 62 #50823Rinaldo
ParticipantHi, 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?
August 14, 2017 at 21:16 UTC - Views: 51 #50826scrambler
ModeratorOpen 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??
August 15, 2017 at 20:58 UTC - Views: 48 #50839Rinaldo
ParticipantWhat I would like to have is something like this: https://www.fool.com/
Please hover over the main menu items.
August 15, 2017 at 22:58 UTC - Views: 46 #50843scrambler
ModeratorIf 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.
August 15, 2017 at 23:36 UTC - Views: 60 #50846scrambler
ModeratorFirst, 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….
August 16, 2017 at 01:29 UTC - Views: 67 #50851scrambler
ModeratorIf 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;}August 21, 2017 at 18:39 UTC - Views: 37 #51002Rinaldo
ParticipantHi, 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.
August 21, 2017 at 18:48 UTC - Views: 46 #51003This 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
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;}
August 21, 2017 at 19:39 UTC - Views: 26 #51005Rinaldo
Participantreduced to 3 columns, works.
Thank you!!
September 18, 2017 at 14:20 UTC - Views: 14 #51482Rinaldo
ParticipantHi,
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!
September 18, 2017 at 15:07 UTC - Views: 15 #51484Weaver
KeymasterI’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
-
AuthorPosts
- The forum ‘ Feature Suggestions’ is closed to new topics and replies.