We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can't change colors in Sidebar Menu

Thread ID:

Created:

Updated:

Platform:

Replies:

144700 May 17,2019 06:00 PM UTC Jun 6,2019 01:10 PM UTC ASP.NET Core - EJ 2 7
loading
Tags: Sidebar
Patrick Lapointe
Asked On May 17, 2019 06:00 PM UTC

Hi Team,

I can't seem to change the default background color in the Sidebar Menu(Black).

Also, when I add an url to a MenuItem, the text of this MenuItem becomes Black also...
Black on Black...
I can't change the MenuItem text color when it's an url.

I'm just testing with your sample project.

Any help would be appreciated.

Thanks!

http://localhost:52256/Sidebar/SidebarMenu

First element (Overview) points to Google.




Ashokkumar Balasubramanian [Syncfusion]
Replied On May 20, 2019 07:25 AM UTC

Hi Patrick, 
 
Greetings from Syncfusion support. 
 
Your reported style level concerns are provided in application level, not implemented in source side. So, you can find the corresponding element and apply the styles as per your requirement. Please find the below modified code block. 
 
//Change the default color in Sidebar Menu 
 
#sidebar-menu, #sidebar-menu ul, #header ul, .dock-menu .e-menu-wrapper, .dock-menu.e-menu-wrapper, .dock-menu.e-menu-wrapper ul > *, .dock-menu .e-menu-wrapper ul > * { 
    background-color: red; 
    color: #fff; 
    overflow: hidden; 
} 
 
//Change the color for Menu item 
.dock-menu .e-menu-wrapper ul .e-menu-item .e-caret, #header .search-icon, #sidebar-menu .action-btn, #header .e-menu-item .e-caret, .dock-menu .e-menu-wrapper ul .e-menu-item { 
    color: #fff !important; 
} 
 
Corresponding application level applied styles are displayed in source tab, could you please check it? 
 
 
Please let us know, if you need any further assistance on this 
 
Regards, 
Ashokkumar B. 
 


Patrick Lapointe
Replied On May 21, 2019 01:19 PM UTC

This does not change the color of the url(text color).
The text 'Overview' stays black even if all other text('Notification','Info',etc) is white...

Is this a bug?


Couple other questions:

1. Was it intentional that the color was black on black when MenuItem is a url?

2. Isn't the intended/most likely behavior of a MenuItem to be a url?

3. Is there somewhere a list of all these different 'elements' that we can apply styles to ?


Thanks!


Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On May 22, 2019 01:07 PM UTC

Hi Patrick,  
  
Thank you for your update.  
   
We have checked your reported requirement and we would like to let you know that you can override the CSS as like in the below code snippet, 
  
Code Example  
  
<style> 
/* URL customization*/ 
.e-menu-wrapper ul .e-menu-item a.e-menu-text.e-menu-url { 
      color: #fff; 
    } 
</style> 
 
  
For your convenience, we have prepared the sample with CSS customization for Menu item with url” property  
  
Could you please check the above sample and get back to us, if you need any further assistance on this?  
 
 
Regards,  
Vinoth Kumar S  


Patrick Lapointe
Replied On May 22, 2019 02:31 PM UTC

Hi,

This seems to work.

Where could I have found this specific style 'element' ?

Where can I see details on all these different 'elements' that we can apply styles to ?

Thanks

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On May 23, 2019 12:19 PM UTC

Hi Patrick,  
  
Thank you for your update.  
  
As you can see in the below Menu documentation, the text color of Menu item with URL is black.  
  
In Sidebar sample, text color of Menu item is customized as white and text color for item with URL are overridden as black (not intentional). So, we have provided the workaround solution by overriding the CSS in sample level to achieve your requirement. You can also customize your own styles for Menu and its item by overriding default styles applied in the sample. Please let us know if you need any further assistance on this.  
  
Regards,  
Vinoth Kumar S  


Patrick Lapointe
Replied On June 4, 2019 08:06 PM UTC

Where can I see documentation about all different elements including 'e-menu-url' ?

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On June 6, 2019 01:10 PM UTC

Hi Patrick, 
 
Thank you for your update. 
 
We have checked your reported requirement and we would like to let you know that currently we don’t have document for CSS class name for Menu component. However, will consider this and refresh our online help site.  Please find following list of CSS class names are used to customize the Menu component. 
 
S.NO 
Class Name 
Description 
e-menu-wrapper 
Applied to Menu wrapper element 
e-menu-parent e-menu 
Applied to the parent ul element 
e-menu-item 
Applied to the li element 
e-menu-url 
Applied to the URL element 
e-menu-parent e-ul 
Applied to the sub menu’s parent ul element 
e-menu-icon 
Applied to the icon element 
 
Could you please check the above details and get back to us, if you need any further assistance on this?
 
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon