Monaca Onsen UI Discord Chat Github Repo

Navigation bar center increase when is full

  • Here 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.

  • 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 {
    .navigation-bar:after {
      content: '';
      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;