Full Width Nav Bar with Boxed Layout

[quituck]

Hi,
I was wondering how can I make the nav bar full width with a boxed layout?

[thai]

Hi @quituck,

It could be achieved with the custom CSS, please add the following CSS under Theme Options > CSS:

.x-navbar-inner .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

Hope it helps

[quituck]

Hi,
Thanks for your response. I tried the css above and didn’t have any luck. I using a renew stack if that helps.

I used:
.x-navbar-inner .x-container.max.width {
width: 100% !important;
max-width: 100% !important;
}

Please advise.

Thank you!

[ruenel]

Hello @quituck,

Sorry if the code did not work for you. I check your licenses looking for the correct site URL using the renew 1. I could not figure out which of your site will be using the custom css code. I will just base my solution using the Renew 1 demo (http://demo.theme.co/renew-1/blog/). To resolve your issue, you will need to use this code:

.x-renew .masthead{
    width: 100vw;
    margin-left: calc((1000px - 100vw)/2);
}

.x-navbar-inner .x-container.max.width {
    width: 100% !important;
    max-width: 100% !important;
}

I am just assuming that you have the same set up as the demo. If ever this slightly works then you will have to adjust 1000px to the correct maximum site width of your site, You can check this in X > Theme Options > Layouts & Design > Site Width Max settings.

Hope this helps. Please let us know how it goes.