How do I change the side menu background color?

As a follow-up, here is a screenshot of the resulting styles in the browser:

And with the emulator:

Woops, didnā€™t check the ionic version in that codepen. In the screenshots above Iā€™m running on beta 8.

Just curious if you ever found a resolution for this issue @notmatt? I seem to be running into the same problem. (Iā€™m on beta 8 currently)

When testing in a browser, the left panel background is colored as expected, and same on Android devices. However, on iOS (emulator and physical devices) the left-panel background color is white.

Hey @ms1752, this should be fixed. Can you test the nightly builds

Yes itā€™s working on device/emulator. You have to increase specificity when targeting Ionic styles, for me it was:

ion-side-menu.menu-left.menu {
  background-color: #5B6166 !important;
}

Actually, it was working on the iOS Simulator. Not anymore! Going to investigate.

@notmatt Did you ever find a solution to this? I can get a image to display as the side-menu background in the browser, but not on Android.

same hereā€¦ any fix on this? i can change the background color & background image of side-menu in my Chrome browser, iOS8, Android 4.1-4.3 but NOT Android 4.4ā€¦ itā€™s driving me crazyā€¦ in Android 4.4, itā€™s just a white area in the side-menuā€¦

What version of ionic are you using? The latest beta or anything earlier?

@mhartington I am having this problem in the latest beta. (13)

I too was looking for a best practice approach to style the Side Menu.
I believe i figured out the right way to go.

Thanks to @robf btw for clarifying.

First, there are existing classes that will change the look of the ion-item directives or list items.
For example, adding the class item-dark to ion-item will set the links to display with a dark background with light text.

Then to modify the menuā€™s background color, as well as to modify most other ionic components, i use SASS

When scaffolding a project with ionic start myApp sidemenu

Reference the variables you want to change in MyApp/www/lib/scss/_variables.scss, but do NOT change them in this file.
Instead you should set new values in MyApp/sass/ionic.app.scss.
When you build your project via the CLI ionic build the new styles will be compiled into a single style sheet.

The following variables allow you to modify part of the look of the Side Menuā€¦
I am sure there are other variables, but these will get you going:
$menu-bg will change the background color.
$item-border-width will change the border width of ion-item list items in a side menu, although this will obviously effect ALL ion-item in your project.

There are a wealth of variables for adjusting most of ionicā€™s components.
I like to start by modifying these before i write any custom styles.

Hope this was helpful!

1 Like

@disrupt I believe you mean:

  • ā€˜MyAppā€™/www/lib/ionic/scss/_variables.scss
  • ā€˜MyAppā€™/scss/ionic.app.scss

as per:

ionic start myApp sidemenu
1 Like

@disrupt great feedback - just a few typos :slight_smile:

1 Like

Hi, guys!

I have the same problem as @auching :

Somebody fixed it?

I know this is an old topic, but I had the same problem as @th0rv and @auching

The style I applied to the sidebar would show as defined on iOS, Chrome, and some Androids, but not on Nexus 7 with v4.4.3.

I managed to resolve the problem, by digging through some css, the first solution and not a very good one is to remove the default white background for .menu, .pane and .view in the ionic.css file.

But luckily, I somehow found another workaround by wrapping the ion-content in my sidemenu into an ion-pane and setting the ion-pane to the desired background instead of the content.

CSS:

.appMenu{
background: $energized;
}
HTML:



      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
      </ion-nav-buttons>

      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-ios-bell hBtn" ng-click="getDirection('app.notification');"></button>
        <button class="button button-icon button-clear ion-gear-b" ng-click="getDirection('app.settings');"></button>
      </ion-nav-buttons>

    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>


  <ion-side-menu side="left" class="appMenu">
    <left-menu></left-menu>
  </ion-side-menu>

</ion-side-menus>

app.html

p.title//put p.title in {{...}} **app.core.scss** .cntstyle { background-color: #06c; // background: linear-gradient(to bottom, #06c , white); } .cntstyle .list{ background-color: transparent; } .cntstyle .item, .cntstyle .item-content, .cntstyle .item-complex{ background-color: transparent; color: #FFFFFF; border-color: rgba(0,0,0,0); }

Hi mhartington
iā€™m new with ionic 2
is it possible to do the same stuff to change ionic 2 app side menu background

Hello, I know this topic is old, but recently I solve this problem just using it: background-color: rgba(241, 241, 241, 0.843);
Instead it: background-color: #e39e48ff

I was with the same problem, but just it solve my problem.