Background color issue with side menu

ionic-v1
1

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.

image
Pasted image305×552 45.3 KB 

<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-header-bar>

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

Add this to your CSS:

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

Doesn’t work buddy.

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

4

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
                </li>

//in style.css

.list .item {
  background-color: blue;
}
5

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