Background color issue with side menu


Hello All,

I am trying to change the background-color of the side menu.

I gave it a new class .sider and added the new background-color.

But it is not appearing for the entire menu, but appearing in the background. This is weird. Could someone please help.

<ion-side-menu side="left" class="dark-bg">
    <ion-header-bar class="bar bar-dark icon-item-left">
        <img id="gcss-logo" src="img/gcss.jpg" height="35px" width="35px" />
        <h1 class="title">GCSS-2015</h1>

    <ion-content class="sider">
        <ion-list class="sider">
            <ion-item nav-clear menu-close class="item-icon-left sider" href="#/app/home">
                <i class="icon ion-home"></i>Home
            <ion-item nav-clear menu-close class="item-icon-left" href="#/app/speakers">
                <i class="icon ion-mic-a"></i>Speakers
            <ion-item nav-clear menu-close class="item-icon-left" href="#/app/schedule">
                <i class="icon ion-calendar"></i>Schedule
            <ion-item nav-clear menu-close class="item-icon-left" href="#/app/register">
                <i class="icon ion-compose"></i>Register
            <ion-item nav-clear menu-close class="item-icon-left" href="#/app/venue">
                <i class="icon ion-navigate"></i>Venue
            <ion-item nav-clear menu-close class="item-icon-left" href="#/app/accommodation">
                <i class="icon ion-location"></i>Accommodation
           <!--  <ion-item nav-clear menu-close class="item-icon-left" href="#/app/organizers">
                <i class="icon ion-flag"></i>Organizers
            <ion-item nav-clear menu-close class="item-icon-left" ng-click="login()">
                <i class="icon ion-key"></i>Login
            </ion-item> -->


Add this to your CSS:

.list .item {
  background-color: #0000FF;


Doesn’t work buddy.

Moreover, I do not have the classes item and list in my code for this to work.


You need to replace ion-list with ul and ion-item with li. Then you add the “list” and “item” classes to their respective tags.

Here’s a working example of your own code:

<ul class="list">
                <li nav-clear menu-close class="item item-icon-left sider" href="#/app/home">
                    <i class="icon ion-home"></i>Home

//in style.css

.list .item {
  background-color: blue;


Thanks a lot Nick for taking time to solve my problem.
Good day :slight_smile: