[Support request] Secondary Menu

Home Forums Support Secondary Menu

  • This topic has 17 replies, 2 voices, and was last updated 10 months ago by David.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1077529
    gedosan

    Hi guys

    Curious to know how to build a fly out menu like the guys have here (see below).

    When you hover over any menu item at the top, you get a full width menu appear that’s neatly organised by category.

    Not sure if this is possible right out the box?

    Thanks!

    #1077751
    David
    Staff
    Customer Support
    #1077797
    gedosan

    Perfect thanks

    #1077807
    David
    Staff
    Customer Support
    #1077838
    gedosan

    One Q – is it possible to have the child just a title, not a link? So the mega menu is grouped into categories but the category titles aren’t links? Have added the page I’m working on to the ticket so you can see.

    #1077897
    David
    Staff
    Customer Support

    Simplest way is to add a CSS class those menu items eg.

    custom-menu-label

    @media (min-width: 769px) {
        .custom-menu-label > a {
            pointer-events: none;
        }
    }

    This will stop the link option on desktop but not on your mobile menus where the you will probably need it to expand the submenus.

    #1077898
    gedosan

    Sorry, and another Q – how do I make the menu full width, like in the example I showed you?

    Cheers

    #1077901
    David
    Staff
    Customer Support

    Simplest way is to Customizer > Layout > Header –> Enable Navigation as header

    #1078070
    gedosan

    Great – could you give me the CSS for the background (want to make it #ffffff) and control the size of the grandchildren (to make them smaller!) and reduce the vertical space between them please.

    Cheers

    #1078089
    David
    Staff
    Customer Support

    Sorry made a mistake in the CSS – updated here

    You can change the colors in Customizer > Colors > Primary Navigation –> Sub Menus

    #1078124
    gedosan

    Thanks – anything I can do to reduce spacing between grandchildren / reduce size?
    Also, I take it there’s no way to go full width white? – take a look, you can see stuff either side of the nav when it’s expanded.

    Thanks

    #1078224
    David
    Staff
    Customer Support

    With in the @media (min-width: 769px) { add the following CSS:

    /* reduced top and bottom spacing between child items to 4px */
    .main-navigation .main-nav ul ul li a {
        padding: 4px 10px 4px 10px;
    }
    
    /* Allow mega menu to span full width */
    .inside-navigation {
        position: static;
    }
    
    /* Center mega menu within container */
    .dropdown-hover .main-navigation:not(.toggled) ul li.mega-menu:hover>ul {
        display: flex;
        justify-content: center;
    }

    Then find this block of CSS from the mega menu ( it’ll be within an @media query), and add the additional property i have commented:

    .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
        max-width: 275px; /* Add this property */
    }
    #1078275
    gedosan

    Very cool – managed to do most of it, take a look. I added a bit of padding to top and bottom to give it some space. I wanted the columns to be brought in a touch of the left and right too (tried padding left and right but didn’t work). What do I need there?

    G

    #1078279
    David
    Staff
    Customer Support

    Remove the padding left and right that you added.

    This line: max-width: 275px; /* Add this property */ reduce the max-width to make each column smaller.

    #1078291
    gedosan

    Perfect, last question then I promise I’ll leave you alone! In the columns where I don’t have many entries (eg the first column), I’d like to add another child and group of grandchildren to use the same space more effectively. Any way to do that?

    G

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.