Navigation bar center increase when is full

[koundou]

Here http://codepen.io/kountouretis/pen/YqYxEa is an example when the center class of navigation bar is full. How can i control this so the letters change line when the class is full. Thanks in advance.

[IliaSky]

If you want them to go to the next line then you could do something like

.navigation-bar__center {
  white-space: initial;
  height: auto;
}
.navigation-bar {
  height:auto;
}

.navigation-bar:after {
  content: '';
  clear:both;
  display: block;
}

However I wouldn’t recommend that as the toolbar is expected to have a fixed height and this fix may break other things, but it’s your choice.

A more common approach is just replace the text with ... at the end. To do that you need:

.navigation-bar__center {
  overflow: hidden;
  text-overflow: ellipsis;
}