This is a migrated thread and some comments may be shown as answers.

How to keep the top menu items in single line?

1 Answer 160 Views
Menu
This is a migrated thread and some comments may be shown as answers.
che
Top achievements
Rank 1
che asked on 28 Aug 2017, 04:18 PM

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!

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 30 Aug 2017, 10:56 AM
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.

Regards,
Neli
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.
Tags
Menu
Asked by
che
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or