Need main menu to span full width of website like the slider does

Hello, I am needing to reduce the spacing on either side of my main menu on all devices that the menu shows at the top like on desktop (so not mobile, it works just fine there). In the picture I’ve attached you can see what I’m talking about, on the left and right of the main menu I’m needing that space reduced please. Is there some custom CSS I can put in for this? For reference to the picture I’ve attached you can see it at my website link at https://www.fateunbound.com/

Thank you in advance, I’ve looked all over the forums and cannot find an answer to this specific question.

Hi @fateunbound,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.navbar.navbar-default .container {
    max-width: 1190px;
}

Best Regards,
Movin

Good morning,
I put that CSS in and it didn’t work. As I add new items to my menu it creates a second line instead of spanning the width of the page. I’ve attached an image to show you what I mean.

Then please try using below CSS code.

#page .navbar.navbar-default .container {
    max-width: 1190px;
}

Then please try using below CSS code.

#page .navbar.navbar-default .container {
    max-width: 100%;
    width: 100%;
}

#page .navbar.navbar-default .container {
max-width: 100%;
width: 100%;

This one worked, thank you!!

You are most welcome here :slight_smile: