As a follow-up, here is a screenshot of the resulting styles in the browser:
And with the emulator:
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.
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?
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!
@disrupt I believe you mean:
as per:
ionic start myApp sidemenu
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.