3. Navigation bar center increase when is full

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Navigation bar center increase when is full

  • K

    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.

    0

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