[Resolved] 8 Column Mega Menu

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

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.

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’
)

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