Resizing Scrollable Menu

2 posts, 0 answers
  1. Jamie
    Jamie avatar
    7 posts
    Member since:
    Feb 2015

    Posted 25 Feb Link to this post

         Does anyone know how to make the scrollable menu option work based on the size of the screen?  I can get it to work if I explicitly set a width on my menu but I want the menu width to be based on the screen size.  So if a user is viewing the menu full screen it wouldn't scroll because everything fits but if they shrink the window (or view it on a smaller screen) then it would scroll.
  2.
  3. Neli
    Admin
    Neli avatar
    194 posts

    Posted 27 Feb Link to this post

    Hello Jamie,

    You can use media queries and set different width to the Menu wrapper depending on the screen size. Below is an example of such style:
    <style>
        @media only screen and (max-width: 1020px) {
          .k-menu-scroll-wrapper  {
              width: 550px !important;
          }   
        }
         
        @media only screen and (max-width: 960px) {
          .k-menu-scroll-wrapper  {
              width: 150px !important;
          }   
        }
      </style>


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular 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