8 Column Mega Menu

Change the CSS for 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;
    }
}

It will only apply to the top level navigation

Absolutely perfect David. Thanks so much

Glad to hear that

So sorry David, one more thing.
I have changed the top of menu text color to yellow on the mega menu, which is exactly how I want the mega menu to look. However, this has also changed the text color for all the normal drop down menus.

Am I able to make the normal menu drop down text white, but not effect the yellow in the Mega menu?

Thanks

Change your CSS to this:

.main-navigation .main-nav > ul > li.mega-menu > ul > li > a {
    background-color: inherit;
    font-size: 14px;
    color: #F4C424;
}

Note this part: li.mega-menu it means it will only apply to the mega-menu drop downs.

Thanks David, that worked great.

You're welcome