Need Help with Mega Menu

Hi there,

I’m not able to access your site:
https://www.screencast.com/t/XlLFYaBzoPw

Can you unlock it?

@leohsiang , I checked in with our IT Department and they told me that only locations within the United States are able to view our site. Are you outside the U.S.? I won’t be able to unlock the site.

Hi there,

try this CSS:

/* Sub menu top child item style */
.main-navigation .main-nav ul li.mega-menu > ul > li > a {
    font-size: 18px;
    font-weight: bold;
    font-color: #000;
}
/* Add borders between sub menu */
.main-navigation .main-nav ul li.mega-menu > ul > li:not(:last-child) {
    border-right: 1px solid #000;
}

@diggeddy , this worked! ??

A couple more questions:

– How can I make the text under the headings not bold?
– How can extend the separator? Right now it stops a little too early.
– How can I make the headings not links?

Thanks so much for your help! Really appreciate it.

Are you able to share a screenshot so i can figure out whats going on?

@diggeddy , how do I go about adding a screenshot here?

Thanks,
Lora

@diggeddy, here’s a quick screenshot/movie – https://nimb.ws/e9ghMs

– How can I make the text under the headings not bold?
– How can extend the separator? Right now it stops a little too early.
– How can I create a box around the entire drop-down menu when open on click to separate it from the rest of the background?

Thank you so much for your help. The website is at https://student.sccld.org and it’s the drop-down menu for “All Ages.”

Best,
Lora

• This reply was modified 4 years ago by lcokolat.

The font size weight and the border around the whole dropdown can be done with this CSS:

.main-navigation .main-nav ul ul li a {
    font-weight: 400;
}

nav .main-nav .mega-menu > ul {
    border: 1px solid #ccc;
}

The dividers are a bit more tricky, as they only fill the length of the current sub-sub menu. In this case thats the first menu which is shorter then its sibling. For example you could change this CSS:

/* Add borders between sub menu */
.main-navigation .main-nav ul li.mega-menu > ul > li:not(:last-child) {
    border-right: 1px solid #000;
}

to:

/* Add borders between sub menu */
.main-navigation .main-nav ul li.mega-menu > ul > li:not(:first-child) {
    border-left: 1px solid #000;
}

But if sibling menus are longer or shorter than you will see that some no longer reach the full height….. this is a bit of puzzle… still thinking.

@diggeddy , the suggestions worked… I have one more question – how can I move the 2 sibling menus further to the right? At the moment they are aligned to the left. I don’t believe we plan on having more than 2 columns as part of the drop down menu.

Thanks,
Lora

Will this be the only mega menu you will be adding to the site ?

@diggeddy , yes it would be the only one for the time being. I don’t think we’ll be expanding any further. I can record all the changes I’ve done in case we need to revert back.

Would it also be possible to have the entire box expand to the left and the right? And would it be possible to include the text “All Ages” to the left as an additional title/header? I’m including a screencast to show you what I’m mean by that from our other website that we own: https://nimb.ws/2rWUA3

Thanks,
Lora

Ok – so we need to get the ‘All Ages Header’ in there.
Could you create another child menu item for that sub-menu to include the All Ages title. And give menu item these two classes mega-menu-title hide-on-mobile

Once thats in there i can look at the CSS to style it all.

@diggeddy , we ended up adding another column to the mega menu. I now added the menu title as well. Here’s what I need help with:

– Remove the separator from menu title column (As an example, see our other website at https://sccld.org and click on “Connect” to see how there’s no separator between the title menu and the rest of the links).

– Make the menu title font larger. For an example, see our other website at https://sccld.org to see how the font is larger for menu titles. You can review “Connect” again.

– Extend the separator for the other column between Quick Start and Homework.

– Have the menu be full width. On large monitors the menu does not extend all the way.

– Double check the width for each column. They should be about equal width or whatever they will be by design?

Thanks so much for your help. Please let me know if you need any sample screenshots.

Best,
Lora

• This reply was modified 4 years ago by lcokolat.

OK so this was fun ??
Replace all of the Mega Menu CSS you have so far with this:

@media (min-width: 769px) {

    /* Set up Mega Menu for full width container */
    .main-navigation {
        position: relative;
    }

    .main-navigation .inside-navigation,
    nav .main-nav .mega-menu {
        position: static;
    }

    nav .main-nav .mega-menu>ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
    }

    nav .main-nav .mega-menu>ul>li:hover>a,
    nav .main-nav .mega-menu>ul>li:focus>a,
    nav .main-nav .mega-menu>ul>li[class*="current-"]>a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: inherit;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
        pointer-events: auto;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }

    /* Make sub menus flex and add container padding */
    nav.main-navigation .main-nav .mega-menu>ul.toggled-on {
        display: flex !important;
        padding: 20px 10px;
    }

    /* set max-width of sub menus */
    nav .main-nav .mega-menu>ul>li {
        max-width: 250px;
    }

    /* Mega Menu top child item style */
    .main-navigation .main-nav ul li.mega-menu>ul>li>a {
        font-size: 16px;
        font-weight: bold;
        text-decoration-color: #000;
        text-decoration: none;
    }
    /* Mega Menu sub menu link styles */
    .main-navigation .main-nav ul ul li a {
        font-weight: 400;
    }

    /* Sub menu first child Title element */
    .main-navigation .main-nav ul li.mega-menu>ul>li:first-child>a {
        font-size: 24px;
    }

    /* Add borders around nav and between sub menu */
    .main-navigation .main-nav ul li.mega-menu>ul>li:not(:first-child):not(:last-child) {
        border-right: 1px solid #ccc;
    }
    nav .main-nav .mega-menu>ul {
        border: 1px solid #ccc;
    }
}
/* Keep Mega menu aligned on large screens */
@media(min-width: 1680px) {
    nav .main-nav .mega-menu>ul>li:first-child {
        margin-left: calc((100vw - 1680px) / 2);
    }

    nav .main-nav .mega-menu>ul>li:last-child {
        margin-right: auto;
    }
}

Of all the CSS please note this Rule in the above:

    /* set max-width of sub menus */
    nav .main-nav .mega-menu>ul>li {
        max-width: 250px;
    }

No longer does it use %’s for their column widths instead you set a max-width for each column, currently set at 250px. The thing to be mindful of is if you need to add more columns then this may need reducing.
If you add another mega menu we can look at adding a specific CSS class to change this value on a per use basis.

@diggeddy , THANK YOU SOOOOO MUCH. ??

It has worked beautifully! I did end up adding another mega menu but it seems to be working okay with respect to the column width.

Please let me know if I need to make any changes regarding the second mega menu.

I can’t thank you enough for your help. I’m really grateful for your help in this matter.

Best wishes,
Lora