In the Oxygen’s Facebook group a user asks:
Is there a way to have a full width menu (using header builder) but splitting up menu items? Something like this:
This can be easily set up by placing the nav menu in Header Builder’s center row, making it full-width and setting the left margin of third menu item to auto.
Step 1
Add/move the Menu component in/to your Main Catch All Template’s Header Builder’s center row.
Why center row and not left or right rows? Because center row’s flex-grow is set to 1 out of the box.
Advanced > Size & Spacing > Width: 100%
At the breakpoint where you have the menu to collapse to a hamburger set the width back to auto since we want the hamburger icon to be centered.
Step 2
At Manage > Stylesheets add this custom CSS:
.oxy-nav-menu .oxy-nav-menu-list li.menu-item:nth-child(3) {
margin-left: auto;
}