Navigation bar center increase when is full



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



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

Log in to reply