1. Home
  2. Forum
  3. ASP.NET Web Forms (Classic)
  4. Need the Menu to appear in small responsive format even on bigger screen sizes

Need the Menu to appear in small responsive format even on bigger screen sizes

Hello!

Is there a way for the Menu to always be displayed in the following manner even when window width is above 767px?


Right now, when the window width is higher than 767px the menu is displayed the following way:

This is the current code I am using for the Menu:
  <ej:Menu ID="TreeXmlDSr" runat="server" DataSourceID="dsNavigationSiteMap" Width="300" OverflowWidth="200"></ej:Menu>

I would prefer to have it in a collapsed manner, with the word "Menu" in it, independent of the screen size/window width. 

Can you help, please?
Thanks,
Simone

1 Reply 1 reply marked as answer
MK Muthukrishnan Kandasamy Syncfusion Team July 15, 2020 01:11 PM UTC

 
Hi Simone, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirements in Syncfusion EJ Menu control. We have added separate styles for Menu control when the media width is less than and greater than of 767px. For your requirement, we need to add the all the required styles, please refer to the below code block. 
 
/* show hamburger icon */ 
        .e-menu-res-wrap.e-menu-responsive .e-icon.e-check-wrap:before { 
            content: "\e76b"; 
            font-size: 20px; 
            width: 20px; 
            height: 20px; 
            margin-top: 5px; 
            margin-bottom: 5px; 
        } 
 
        .e-menu.e-horizontal.e-menu-responsive>.e-list>a { 
            line-height: 32px !important; 
        } 
        .e-menu.e-horizontal.e-menu-responsive li.e-list>a .e-icon 
        { 
            position: absolute; 
            right: 8px; 
        } 
    .e-menu.e-menu-responsive .e-list > ul > .e-list > a span.e-arrows:before, .e-menu.e-menu-responsive .e-list > ul > .e-list > span span.e-arrows:before,.e-menu.e-vertical.e-menu-responsive > .e-list > a span.e-arrows:before, .e-menu.e-vertical.e-menu-responsive > .e-list > span span.e-arrows:before, .e-menu.e-menu-responsive .e-list > ul .e-list:hover > a span.e-arrows:before, .e-menu.e-menu-responsive .e-list > ul .e-list:hover > span span.e-arrows:before, .e-menu.e-menu-responsive > .e-list:hover > a span.e-arrows:before, .e-menu.e-menu-responsive > .e-list:hover > span span.e-arrows:before { 
        content: "\e627" !important; 
    }   
    .e-menu.e-horizontal.e-menu-responsive li.e-list ul,.e-menu.e-vertical.e-menu-responsive li.e-list ul { 
        border:0 none; 
    } 
            .e-menu.e-separator.e-horizontal.e-menu-responsive > .e-list,.e-menu.e-separator.e-vertical.e-menu-responsive> .e-list { 
        border: medium none; 
    } 
            .e-menu.e-menu-responsive{ 
                border-top:none; 
            } 
    .e-menu-wrap.e-menu-responsive .e-hide { 
        display: block; 
        position: absolute; 
    }  
    .e-menu.e-horizontal.e-menu-responsive,.e-menu.e-horizontal.e-menu-responsive.e-res-hide { 
        display: none; 
    }   
     .e-menu-res-wrap.e-menu-responsive,.e-menu.e-horizontal.e-menu-responsive.e-res-show,.e-menu-wrap.e-menu-responsive .e-res-title{ 
        display:block; 
    } 
    
        .e-menu.e-horizontal.e-menu-responsive li.e-list,.e-menu.e-vertical.e-menu-responsive,.e-menu.e-vertical.e-menu-responsive li.e-list  { 
        display: block; 
        } 
        .e-menu.e-horizontal.e-menu-responsive li.e-list.e-hidden-item { 
            display: none; 
        } 
    .e-menu.e-horizontal.e-menu-responsive li.e-list > ul, .e-menu.e-horizontal.e-menu-responsive  li.e-list,.e-menu.e-vertical.e-menu-responsive li.e-list > ul, .e-menu.e-vertical.e-menu-responsive  li.e-list  { 
        position: static; 
        } 
    .e-menu.e-horizontal.e-menu-responsive> li.e-list > ul:after,.e-menu.e-vertical.e-menu-responsive > li.e-list > ul:after { 
        content:none; 
       } 
    .e-menu.e-horizontal.e-menu-responsive>.e-list>a { 
            line-height:32px !important; 
        } 
    .e-menu.e-horizontal.e-menu-responsive > .e-list > a > span { 
        line-height:1 !important; 
        top:35% !important; 
        } 
    .e-menu.e-horizontal.e-menu-responsive { 
        height: initial !important; 
    } 
    .e-menu.e-vertical.e-menu-responsive>li.e-list >ul li.e-list > a, .e-menu.e-vertical.e-menu-responsive>li.e-list>ul li.e-list > span { 
        line-height:27px; 
       } 
     .e-menu.e-menu-responsive li.e-list>ul li.e-list > a, .e-menu.e-menu-responsive li.e-list > ul li.e-list > span { 
        padding: 0px 18px 0px 30px; 
        line-height: 32px; 
      } 
    .e-menu-wrap.e-menu-responsive .e-menu.e-menu-responsive > li.e-separator { 
        border:0; 
        border-bottom:1px solid #c8c8c8; 
    } 
    .e-menu-wrap.e-menu-responsive .e-menu.e-horizontal.e-menu-responsive .e-list:hover { 
        border-color:#c8c8c8; 
    } 
 
We have prepared sample in JS Playground for your convenience. Please refer to the below link for the sample. 
 
 
Description 
Link 
Getting started for Menu 
Icons and navigation 
Customization 
API reference 
Live demo 
 
Please let us know, if you need any further assistance. 

Regards, 
Muthukrishnan Kandasamy 


Marked as answer
Loader.
Up arrow icon