Skip to main content

How to change Ionic side menu background color

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page


The Ionic side menu template one of my favorite templates to work with, having said that i absolutely hate the white background of the side menu in sidemen template. So here is a way to change the appearance of your side menu.

We will need to add a class “custom” to the ion-content tag in the www/templates/menu.html

Notice that my ion-header-bar has a class of bar-assertive as well.


We can add our custom menu styles to the www/css/style.css which will override the default styles.


And this is the result

Ionic side menu color change



Got A Question?

Hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper


Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Thanks! Great work!

  • adeeba aqil

    can we put a image in side menu header bar ???reply soon

    • Vahan Terzibashian

      Yup of course you can, here is the source code:





      focus on the fourth line, first add your image preferably as a png in the img folder in www. after that put it in as an item.

      • Thanks for the answer.. Worked out great

      • Anita

        When I tried this code, image and “News” come in separate lines. Is it possible to make it in single line ?

    • as @vahanterzibashian:disqus mentioned what you need to do is to first create a ion-item and put a img tag with class=”profile”
      That will show up the image as a profile image as is seen in many apps nowadays

  • John Tyrrell

    Hi, I entered the code exactly as above but don’t get the red “left” – any ideas? Cheers.

    • you can add on the ion-av-bar…As seen on menu.html line 3

  • Suraz Khanal

    Bug . Padding line

  • Asep Capuy

    it doesn’t work for my project.. any ideas?

%d bloggers like this: