How to keep the top menu items in single line?

2 posts, 0 answers
  1. che
    che avatar
    2 posts
    Member since:
    Jan 2015

    Posted 28 Aug 2017 Link to this post

    When the windows size is smaller. The top level menu items will auto wrap. The top menu items will display in mult-lines.

    I want all top menu item display in single line always. 

    Thank you!

  2. Neli
    Neli avatar
    428 posts

    Posted 30 Aug 2017 Link to this post

    Hello Che,

    If you need to prevent the menu wrapping you could do it by using following css:
    #menu  {
          white-space: nowrap;
      #menu > li {
      display: inline-block;
      float: none;
      margin: 0 -3px 0 0;

    This will keep all listed items in line regardless of the parent width.

    The other possibility is to use Kendo Menu scrollable configuration. If you set it to true, you will enable the scrollable functionality.

    In the the following Dojo you could find examples for both ways of displaying the menu.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top