Making Menu background full width of site

Hi Steve,

I would need to see your site in order to advise what CSS you would need to make the background stretch the full width. Usually you would do it the other way around – i.e. set the menu background to match the color of the row that the menu sits inside.

If you switch your sub menu to the Grid Layout, you can change it to 12 columns here:

https://screencast.com/t/cmxv6Z2w7

Regards,
Tom

Hi Tom

With the help of Alex of Siteorigin we have fixed the width issue. You have the CSS apparently on your web site for the Vantage theme.

This is the CSS on your site:

——————————————-
/** Push menu onto new line **/
#{$wrap} {
clear: both;
}

@media (min-width: 600px) {
.site-navigation {
@include background($container_background_from, $container_background_to);
margin-right: -35px;
margin-left: -35px;
}
}
————————————————–

Along with some custom CSS of theirs:

body.responsive.layout-full #page-wrapper .site-navigation .full-container {
max-width: none;
}

However I cannot now have the sub menu inset (some space either side). If I use 80% the sub menu is reduced but formats to the left side of the page. Any ideas on how to do that?

Regards

Steve

Hi Steve,

Please post a link to your site (with Maintenance mode disabled) so I can take a look.

Regards,
Tom

Hi Tom

The URL is acgwest.co.uk

Cheers

Steve

Thanks. There’s a few ways to do this. Try this first though:

Go to Mega Menu > Menu Themes > Custom Styling and add the following:

@include desktop {
    #{$wrap} #{$menu} {
        max-width: 80%;
        margin: 0 auto;
    }
}

Regards,
Tom

Thanks Tom

That works a treat.

Regards

Steve

Hi Steve,

Good to hear ??

If you have a spare minute, would you mind leaving a quick review for the plugin at the bottom of this page?

Regards,
Tom