Provlem with Side Menu Styling

ionic-v1
1

I’d like to style my side menu but can’t get the desired result.

I want a sidemenu with black background and white text. I use ion-list and ion-item directives. But some of the items keep a white background. I inspected the dom and found out that those items got a item-complex class so I added:

.menu .list .item-complex {
    font-weight: 200;
    font-size: 24px;
    color: #000;
    line-height: 19px;
    margin-bottom: 28px;
    background-color: #000 !important;
    background: #000 !important;
}

The color style changes the text color but the background stays white regardless of my settings.

2 
.menu {
    background-color: #f00;
}
3

I did that of course. The general background of the menu is as it should be. It is only the background of certain list items that stays white

4

I assign a class to the <ion-content> section of the menu. Then, can target the individual items.

<ion-side-menu side="left" width="320">
  <header class="bar bar-header bar-dark spotagory-header spot-black">
        My App Name
  </header>
  <ion-content class="has-header spot-black">
    <div class="list">
      <div class="item" menu-close>
        Main Feed
      </div>
      <div class="item" menu-close>
        Edit Profile
      </div>
      <div class="item" menu-close>
        Add Friends
      </div>
      <div class="item" menu-close>
        Radius Change
      </div>
      <div class="item" menu-close>
        Settings
      </div>
      <div class="item" menu-close>
        Logout
      </div>
      <div class="item item-icon-right" menu-close>
        Notifications (41)
        <i class="icon ion-chevron-right"></i>
      </div>
    </div>
  </ion-content>
</ion-side-menu>


.spot-black .item{
  border : none;
  background-color: pink;
}

Just kidding about that pink background.

1 Like
5

I got it working by changing the tags from and to divs with the appropriate classes.

1 Like