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

Topic Resolution: Resolved

This topic contains 17 replies, has 3 voices, and was last updated by  Rinaldo 1 month ago.

Viewing 16 posts - 1 through 16 (of 18 total)
  • Author
    Posts
  • #50736
    Answered

    Rinaldo
    Participant

    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.

    #50737

    scrambler
    Moderator

    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.

    #50738

    Rinaldo
    Participant

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

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

    #50739

    scrambler
    Moderator

    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?

    #50742

    scrambler
    Moderator

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

     

    #50823

    Rinaldo
    Participant

    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

    ?

    #50826

    scrambler
    Moderator

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

    #50839

    Rinaldo
    Participant

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

    Please hover over the main menu items.

    #50843

    scrambler
    Moderator

    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.

    #50846

    scrambler
    Moderator

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

    #50851

    scrambler
    Moderator

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

    #51002

    Rinaldo
    Participant

    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.

     

    #51003
    Best Answer

    scrambler
    Moderator

    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

    https://guide.weavertheme.com/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;}

    #51005

    Rinaldo
    Participant

    reduced to 3 columns, works.

    Thank you!!

     

    #51482

    Rinaldo
    Participant

    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!

     

     

    #51484

    Weaver
    Keymaster

    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

Viewing 16 posts - 1 through 16 (of 18 total)

You must be logged in to reply to this topic.