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;
}

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: