Evenly Space Nav Menu Items

How To
1

I feel like this should be really obvious, but i’m struggling to get it to work without lots of CSS. We just want a horizontal menu bar where the individual nav items expand to fill the bar. It seems like it should be a simple flex with ‘space-between’, but I can’t seem to get it to work. Is there something i’m missing, or can this only be done with CSS. I’m looking for this kind of layout:

menu
menu1777×174 155 KB

2

Hi Paul,
It depends on which menu element you use:

Nav Nestable

  1. set the width of the nav nestable element to 100%
  2. select the “Nav items” element in the structure panel and set justify-content (align main axis) to space-between

Nav Menu

  1. Set the top level margin-left to 0
  2. Add this to the menu’s custom CSS:
%root% {
  width: 100%;
}

%root% .bricks-nav-menu {
  justify-content: space-between;
}

It’s best to try with a new, unstyled menu, as I don’t know which styles you have already used that might conflict.

Best regards,
timmse

3

Thanks for your help. I’ve probably been overcomplicating this in my mind. It felt like there would be a setting within the Nav Menu element to do this, but if CSS is the best way to go i’ll stick with that.