Submenu no longer centred after making menu full-width

[orangesandlime]

Hello!
I used one of your custom css codes to make the menu ( 4 ) full width – even though it was set to be in the theme options, the menu was still contained. This is the code I added:

.header-6 .container {
    width: 100%;
}

After doing this, the submenu displays to the left and is no longer centred.

The menu needs to be full-width as I need to be able to add more links. How can I achieve both please?

Thank you very much for your time,
Nancy

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

li.menu-item.sf-mega-menu.sf-mega-menu-fw > ul.sub-menu {
    margin-left: 8%!important;
}

-Rui

[orangesandlime]

Thank you very much for getting back to me, Rui!

Now, while this may work on my screen ( iMac 27″ ), on smaller screens this solution puts the menu too far to the right. Is there no solution that will fix this across all screen sizes please?

Thank you so much for your time,
Nancy

[Rui Guerreiro – SUPPORT]

Add also this code below to resolutions lower than 1280, you can repeat this rule and replace 1280 by a lower value to have different margin-left values in the different screen resolution.

@media only screen and (max-width: 1280px){
    li.menu-item.sf-mega-menu.sf-mega-menu-fw > ul.sub-menu {
        margin-left: 4%!important;
   }
}

-Rui

[orangesandlime]

I may have to fiddle with the values to get it right, but I get the concept.
Thank you for your help!

Nancy

[Rui Guerreiro – SUPPORT]

No problem. Let me know if necessary.

-Rui