8 Column Mega Menu

Hi there,

the Mega Menu will automatically create new rows, so if you set up a 4 x Column mega menu and assign 8 sub menus it will wrap over 2 rows. The new flexbox version causes the incorrect columns. Try updating the CSS to this:

@media (min-width: 769px) {
    nav .main-nav .mega-menu {
        position: static;
    }

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

    nav .main-nav .mega-menu>ul>li>a {
        font-weight: bold;
    }

    nav .main-nav .mega-menu>ul>li {
        width: 25%;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 20%;
    }

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

Hey guys,

I have changed the menu to a 4 column and replaced the CSS. This has indeed given me the two rows, but the bottom row is out of alignment still? As you will see, 'Pro Audio' should be the last column, but has been added to a 3rd row.

Also, when I change the color of the Main Navigation for the mega menu using the above css, it also changes the color of the main menu (Home sub menu items). Is there a way to avoid this?

Thanks

Hey team,

Not sure if my last response was lost due to me editing it. Any ideas how I can straighten the bottom row of the mega menu and change text to Home drop down menu to white.

Sorry to be a pest, thanks

Sorry we missed the last reply!

I've assigned this to David as it looks like he had a good handle on it.

He will get back to you in a few hours :)

Thanks Leo

Can you check the URL and IP ? As i am still seeing the original site.

Try this David

Thats the same as before - and sorry but i still can't access it even after flushing all DNS.
Ill see if one of the other team members can get it to work.

I'm having the same issue. I've added the URL and IP to my hosts file, and flushed my dns, however I'm still seeing what I assume is the old site.

Do you have a temp site you can apply the CSS and menu to so we can see it there?

I have a dev site which I haven't used for a while, but it will again need a hostfile update. I added the css and the same issue occurs with the mega menu. Let me know if you can access this one.

Please also see this image

Not sure if this will help, but I am adding this menu css classes 'mega-menu mega-menu-col-4' and this is all the css in my Child Theme Style Sheet;

@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}

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

nav .main-nav .mega-menu>ul>li>a {
font-weight: 500;
}

nav .main-nav .mega-menu>ul>li {
width: 25%;
}

nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}

nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}

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;
}
}
.main-navigation .main-nav > ul > li > ul > li > a {
background-color: inherit;
font-size: 14px;
color: #F4C424;
}

.main-navigation .main-nav > ul > li > ul > li:hover > a {
background-color: #1a1a1a !important;
color: #F4C424;
}
@media (min-width:1024px){
.main-nav ul li:nth-child(7) {
margin-left: 80px;
}
}
@media (max-width:768px){
.main-nav ul li:nth-child(7) {
margin-left: auto;
}
}
.clickable-container {
position: relative;
}
.clickable-container a {
position: absolute;
height:100%;
width:100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}
array(
'show_top_links' => 'true',
'show_empty_brands' => 'false'
)

In your child theme styles i see this:

@media (min-width:1024px){
.main-nav ul li:nth-child(7) {
    margin-left: 80px;
}
}
@media (max-width:768px){
.main-nav ul li:nth-child(7) {
    margin-left: auto;
}
}

Remove them to resolve the issue.

Hey David,
I have removed this CSS from line 83 as you suggested and while it has fixed the menu issue, the space between the 'phone number' and 'My Account' has been removed. That CSS gave me that gap. Is there another way I can create a gap in the navigation to seperate the account and cart from the site links?

Good: https://ibb.co/SJj1F59
Bad: https://ibb.co/F0hkM5C

Thanks