How do I change the side menu background color?

ionic-v1
1

What is the variable in the _variables.scss file that changes the background for the side-menu? I have been looking everywhere. I see that some of the examples have a different color in the menus’ background

3 Likes
2

I did this for my app by using some custom css (scss in my case) and classes.

3

thank you, the sample code you provided clarify many things in the way you customize the framework.

4

Hi with the new beta (5b) this css doesn’t work anymore and I am not able to get it working again

5

I just updated the codepen to use the nightly builds, and everything is a-ok :ok_hand:

6

Yes the functionality is the same but the “div” behind the list items are now white and not dark. In my app I set ion-items and ion-list to background-color:transparent and ion-content to a dark color so I can easily change the background of the menu over that one value. But now its white and I don’t get it to work again.

7

Ahh I see what you mean.

8

Thank you I will try it later. Is there a way to only have the back button visible and not both buttons? I navigate in the side menu to a pageA and from that pageA to pageB and so I don’t want to have a menu icon on my pageB but only a back button to navigate back to pageA.

9

I don’t get it to work.
It’s the code structure from the seed side menu project on your get started section (where you can choose between blank, tabs and side menu)

Menu-HTML:

    <ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-dark">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-dark"><h1 class="title">Menü</h1></header>
    <ion-content class="has-header my-menu">
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/start">Home</ion-item>
        <ion-item nav-clear menu-close href="#/app/news">News</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

CSS in css/style.css:

.my-menu {
  background-color: #3f4041;
}

.my-menu .list {
  background-color: transparent;
}

.my-menu .item, .my-menu .item-content, .my-menu .item-complex{
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(0,0,0,0);
}

that worked for me with beta4 but now with beta5 it shows me a white background so i tried:

.my-menu {
background-color: #3f4041;
}

.my-menu .scroll {
  background-color: transparent;
}

.my-menu .list {
  background-color: transparent;
}

.my-menu .item, .my-menu .item-content, .my-menu .item-complex{
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(0,0,0,0);
}

but it changed anything… i don’t get where the white color come from. When you look to the HTML every element is transparent but ion-content.

Tried to set the background-color to blue at .list it worked. at .scroll it worked and so I thought when they are transparent the parent element is .my-menu and so that background-color should win but the background color of the menu becomes white. where is the element with the white color?

Is there a way to turn off the bounce effect only for the list in the side menu? I don’t need it there and so I could set the background color of my list to the color I want and any body could see the white color behind it.

10

I updated my codepen

11

I don’t get it. Could you please make a code pen with css and you are using a ul-tag and I am using a ion-list tag is there much difference?

12

Comments and everything :smile:

13

I thank you very much for your effort but it doesn’t work for me. I am using exactly your css and our html is also the same.

14

can you post a codepen?

15

Here is my codepen http://codepen.io/charlieharper90/pen/fyCIi?editors=010

EDIT: now the right code pen link

16

@mhartington and I found out its a problem only with the beta5b in safari. In chrome it works.

He opened an issue in github for that https://github.com/driftyco/ionic/issues/1408

1 Like
17

Does this work in emulator/device builds? I’ve been able to change the sidemenu background in chrome/safari builds but it always defaults to white in the emulator.

18

Yeah this works on an actual device, I’ve used it myself actually a lot. Can you put together a codepen so we can see the issue?

19

It feels a bit weird to have the 20 pixel spacing on the top but it’s done for two reasons:

  • design specs do not specify that the sidemenu has a header of any kind
  • still need to make room for the carrierbar on devices
20

Beta 6 had an issue with this, I upgrade the codepen to the nightly build and all works well.