Snippets: Evenly Spaced out Menu items for Centered Logo Header Style Five

/* Turn menu into a table so we can make all menu items the same width */
.navbar-style-five .dropdown-menu { display: table; width: 100%; table-layout: fixed; width: 100%;}
.header-five #site-navigation .dropdown-menu >,
.header-five #site-navigation .dropdown-menu > { display: table-cell; }

/* This "hack" is used to make all table-cell items the same width, in this case each menu item and the logo is a table-cell */
.navbar-style-five .dropdown-menu > { max-width: 0;  }

/* Make sure any very long links inside the menu break onto a new line */
.navbar-style-five .dropdown-menu > > a > span { word-wrap: break-word; white-space: normal; }

/* This is used to vertically center your logo */
.header-five #site-navigation .dropdown-menu > {vertical-align:middle;padding: 0;text-align: center;}

/* This is used to center the logo */
#site-logo.header-five-logo.display { display: inline-block !important; }
All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.