Published on May 17, 2021

How to separate nav menu items in Oxygen

Sridhar Katakam

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;
}
tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right