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

This topic contains 10 replies, has 2 voices, and was last updated by  scrambler 2 days, 20 hours ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #50736

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.