March 7, 2016

Ionic change side menu background color

Ionic change side menu background color : We often need to change the ionic side menu background color and text color. Default color for ion-side menu is white. Here in this tutorial we are going to explain how you can create beautiful sidebar with your custom background and custom text color.

Ionic change side menu background color

For adding custom background we need to override the default styles with our custom style-

Step 1 – Add css to change sidebar Background

.my-side-menu{
 background: #333;
}

This is used to add the main sidebar’s background color.

Step 1 – Add css to change sidebar List Background, Border & Text Color

.my-list-item{
 background: #333 !important;
 color:#fff !important;
 border:#564545 !important;
}

This will override the default background color of list item class “.item”. Add your custom font color border color and font color you want to add.

Ionic change side menu background color: Sidebar Background Example

<ion-side-menu class="my-side-menu">
	<div class="menu-wrapper">
	     <ul class="list">
		   <li class="item ion-home my-list-item"> Home</li>
		   <li class="item ion-university my-list-item"> Profile</li>
		   <li class="item ion-ios-book my-list-item"> My Posts</li>
		   <li class="item ion-search my-list-item"> Search</li>
		   <li class="item ion-log-out my-list-item"> Logout</li>
		</ul>
	   </div>
</ion-side-menu>

Try it »

If you run the above example it will produce the following output –

Ionic change side menu background color

Note : Make sure the class .my-side-menu and .my-list-itemhave same background color.

Ionic change side menu background color