Full Width Nav Bar

Support
#1

Hello, I am trying to make the navbar full width and for some reason, this CSS is not working:

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

Here is the client website: https://stemisforeveryone.org/

Please take a look and let me know how to update.

#2

Hi @gallagherBD,

Thanks for reaching out.
I have checked and found that the Navbar is already 100%, but the container max width is set to 1200px and the width to 80%. You need to adjust it from Theme Options > Layout and Design as shown in the given screenshot.

image
image382×532 11.4 KB

And also need to add the following custom CSS code in the Global CSS.

.masthead-stacked .desktop .x-nav{
    justify-content: space-between;
    display: flex;
}

image
image1915×107 33.6 KB

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started with custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes, which means we can’t fix it in case it conflicts with something on your site, nor will we enhance it. Further customization should be directed to a third-party developer, or you can avail One, where we answer the questions beyond normal theme support.

Thanks