Equal Column Height?

  • Resolved intoclicks

    (@intoclicks)


    4 years, 7 months ago

    HTTP Authentication:

    • username: intoclicks
    • password: jazzy-coil

    Using Max Mega for the “Program Areas” menu item in the main navigation; I am trying to make the columns equal height so the column on the right (with the purple-ish background color) stretches to the bottom instead of leaving a black space at the bottom.

    I tried editing the CSS but I don’t think I’m targeting correctly. I gave the row and columns their own classes, and tried to use display: table; and display: flex; for the row and their corresponding column settings, but neither seemed to output correctly.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi Intoclicks,

    Please add this to Mega Menu > Menu Themes > Custom Styling:

    #{$wrap} #{$menu} > li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu {
    display: flex;
}
#{$wrap} #{$menu} > li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column {
    flex: 1;
}

    If you want a full height border between your columns, also add:

    #{$wrap} #{$menu} > li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column:not(:first-child) {
    border-left: 1px #ccc solid;
}

    Regards,
    Tom

    Thread Starter intoclicks

    (@intoclicks)

    Hi there,

    This worked great, thank you so much! Marking resolved. ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Equal Column Height?’ is closed to new replies.