Ionic side menu bar styling

1

How can I style menu bar using my css. The menu bar is not responding to my CSS

2

Are you 100% sure you’re targeting correct menu bar classes. Also you will probably need to use !important keyword.

1 Like
4 
 <ion-side-menu side="left">
     <ion-header-bar class="bar-menulite">
         <h1 class="title"><i style="font-size:30px;" class="move-right icon ion-grid"></i></h1>
     </ion-header-bar>
     <ion-content class="redbg">

So I gave the ion-content class redbg to give a background color of red.

my css is like this

.redbg{
     background-color:red !important;
}
5

This is your problem.

ion-content is just an AngularJS directive. Final result is just a bunch of <div> elements. Directive will not copy your class to newly created DOM structure.

My advice, learn how to use Chrome developer tools. Try this code inside your browser and open Chrome developer tools.

Press CTRL+SHIFT+C and select content section. Take a look what real content structure looks like and modify your CSS according to that.

6

Okay, thanks man. I will do that now