How to change background color for NavigationDrawer

[Yukiko Imazu]

Hello,

I'm working on NavigationDrawer.  I want to change background color from white to different color.

I don't want to change a:hover color which is blue in this example below. 

Is it possible to do that?  I've attached sample that I'm working on.

Thanks,

Yukiko

Attachment: WebApplicationnew_39982c74.zip

[Deepa Loganathan]

Hi Yukiko Imazu, 

Thanks for contacting Syncfusion support.  

Yes, you can change the default background color of the list items in Navigation drawer by using the customClass property. The class will be added to the root element of Navigation drawer and then you could select the items by using the CSS selector as highlighted in the below code.  

<ej:NavigationDrawer runat="server" ID="navpane" Direction="Left" Type="Overlay" EnableListView="true" TargetId="butdrawer" ContentId="content_container"> 

                    <ListViewSettings Width="350" PersistSelection="true" RenderTemplate="true" TemplateId="templatelist" TotalItemsCount="7" CssClass="customclass" MouseUp="headChange"  /> 

 

                </ej:NavigationDrawer> 

<style> 

        // style inherited using the customclass 

        .customclass .e-lv .e-list.e-state-default { 

 

        background-color: #e2ddde; 

 

        } 

</style> 

 

Please let us know if you have any further queries.  

Regards,  

Deepa L. 

[Yukiko Imazu]

Hi Deepa,

Thank you for replying.

As I mentioned before, I don't want to change a:hover color which is blue in this example.

After implemented the code that you suggested, a:hover color doesn't show correctly.

Is anything wrong in my code?

I've attached solution.

Thanks,

Yukiko 

Attachment: WebApplicationnew_e4a61b38.zip

[Deepa Loganathan]

Hi Yukiko Imazu,  

 

Sorry for the inconvenience.  

 

Setting the default background color would affect the hover color of list items. To overcome this, you would need to set the hover color of Listitems using the customcss property as given in the below code. 

 

 .customclass .e-lv .e-list.e-state-default {  

  

        background-color: #e2ddde;  

  

        }  

 

 

 .customclass .e-lv .e-list.e-state-default:hover { 

  

        background-color: #86cbea; 

  

        }  

 

 

 

Please let us know if you have any further queries.  

 

Regards,  

 

Deepa L. 

[Yukiko Imazu]

Hi Deepa,

Thank you for your support.

We could achieve our requirement.

Regards,

Yukiko

[Deepa Loganathan]

 Hi Yukiko Imazu,   

 

  

Glad to hear that. Please do contact us if we can be of any further assistance.   

 

  

Regards,   

 

Deepa L.  

[Yukiko Imazu]

Hi Deepa,

I have a one more question regarding hover color.

I could achieve background color to grey below with your css.

I also want to change font-color to white.

but the color of description doesn't change when I added color setting in css

What I did was 

.customclass .e-lv .e-list.e-state-default:hover {
 
             background-color: #86cbea;
             color:white;
 
 }  

I also tried 

.customclass .e-lv .e-list.e-state-default a:hover { 

          color:white;

}

However, this one doesn't change the font-color at the same time with Title.

How can we achieve this change?

Thanks,

Yukiko

[Deepa Loganathan]

Hi Yukiko Imazu,    

 

You could set the font color of the text item by using the below style definitions. 

 

.customclass .e-lv .e-list.e-state-default:hover>.e-chevron-right_01 .e-list-text { 

 

    color: white; 

     

} 

Whereas, if you are using template for rendering the list items of navigation drawer, it can be achieved by using the below style definitions. 

.customclass .e-nb .e-list:hover .templatetext { 

    color: white; 

  font-size: 22px; 

  font-weight: bolder; 

  position: relative; 

}  

Our Theme studio tool allows you to customize the component based on your requirement in addition to the built-in themes support. Please check out the below links know more about the usage of Theme studio. 

Theme Studio: http://js.syncfusion.com/themestudio/   

 

User Guide: https://help.syncfusion.com/js/theme-studio  

 

Regards,  

Deepa L.