Can't change colors in Sidebar Menu

[Patrick Lapointe]

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]

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? 

 

https://ej2.syncfusion.com/aspnetcore/Sidebar/SidebarWithMenu#/material 

 

Please let us know, if you need any further assistance on this 

 

Regards, 

Ashokkumar B. 

 

[Patrick Lapointe]

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]

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,   

http://www.syncfusion.com/downloads/support/forum/144700/ze/WebApplication1-374849260  

  

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]

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]

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.  

https://ej2.syncfusion.com/angular/documentation/menu/icons-and-sub-menu-items/#navigation  

  

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]

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

[Vinoth Kumar Sundara Moorthy]

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
1	e-menu-wrapper	Applied to Menu wrapper element
2	e-menu-parent e-menu	Applied to the parent ul element
3	e-menu-item	Applied to the li element
4	e-menu-url	Applied to the URL element
5	e-menu-parent e-ul	Applied to the sub menu’s parent ul element
6	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