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

Navigation bar center increase when is full browsing