[Resolved] Flexbox Version of Mega Menu

Home Forums Support [Resolved] Flexbox Version of Mega Menu

Home Forums Support Flexbox Version of Mega Menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1646065
    Michael

    I followed the instructions at https://docs.generatepress.com/article/building-simple-mega-menu/ and was able to build the simple mega menu. However, when I configured it to display 5-columns, I noticed that it displays a little funky and wraps the 5th. I went to General > Structure and changed the structure from Flexbox to Floats, and the menu displays correctly but I’d like to use Flexbox. The menu provides all I require – I just want to apply some color and hover changes to the links, etc.

    Assuming that is the issue, is it possible for you to provide the CSS for a flexbox version of the mega? I’ve included my site and the credentials in the private window.

    Thanks much!

    #1646088
    Ying
    Staff
    Customer Support

    Hi Michael,

    Try this CSS to stop it from wrapping:

    .dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on {
        display: flex;
    }

    And this for the sub menu link color, replace the colors with yours:

    body .main-navigation .main-nav ul ul li ul li a {
        color: #000977;
    }
    body .main-navigation .main-nav ul ul li ul li a:hover {
        color: #888888;
    }

    Let me know πŸ™‚

    #1646104
    Michael

    Thanks Ying. That works for the Desktop view but buggers up the mobile and tablet view which I was satisfied with. Is there a way to apply only to desktop only but leave the mobile and tablet view as it was originally?

    #1646119
    Ying
    Staff
    Customer Support

    Yes, we just need to add a media query to the CSS:
    Edited CSS here:

    @media (min-width: 769px) {
        .dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on {
            display: flex;
            }
        body .main-navigation .main-nav ul ul li ul li a {
            color: #000977;
            }
        body .main-navigation .main-nav ul ul li ul li a:hover {
            color: #888888;
            }
    }

    Let me know πŸ™‚

    #1646233
    Michael

    Doh! Thanks for the reminder & great help Ying. Looks great.

    #1646250
    Ying
    Staff
    Customer Support

    No problem, glad to help πŸ™‚

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