Horizontal nav full width equal link box sections

[allt2020]

hi i was looking for tips to manipulate the horizontal nav bar display in evenly sized boxes across full width of screen. when i try to do this with the css below i can get the bar to go full width pretty easy but the text links hug to the right side of the bar

.

/*—this makes nav bar full width
.x-navbar-inner .x-container.max.width {
width: 100% !important;
max-width: 100% !important;

}—*/

/—border\text effects on nav bar—/
ul li a {
border-left: 1px solid rgba(248,248,248, 0.15);
border-right: 1px solid rgba(0,0,0, 0.5);
box-shadow: inset 3px 0px 5px rgba(0,0,0, 0.1);

}

[christian]

Hey @allt2020,

Since this requires custom coding, this basically falls beyond the scope of our product support.

I’ll give you a sample to show the selectors of our theme’s navigation but please note that we will not support the sample nor answer questions regarding it. We expect that you’ll continue working with the sample on your own and maintain it.

Below is the CSS that will achieve a fullwidth navigation in a Stacked Header layout with the menu items spanning the same width.

.x-navbar-inner .x-container {
    width: 100% !important;
}
.x-nav {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
}
.x-nav li {
    flex: 1 1 100%;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
    text-align: center;
}

Just ignore the border in the screenshot. It’s only to show that the menu items span the same width.

Hope that helps.

[allt2020]

ok thanks for the tips that gives me a good start

[christian]

You’re welcome.