Ionic ion-navbar trasparent
1
I have to succeed in making ion-navbar transparent.
I tried to put transparent, but it does not work.
"devDependencies": {
"@ionic/app-scripts": "2.1.3",
"ionic": "3.20.0",
"typescript": "2.3.4",
"electron": "^1.6.5"
},
page.html
<ion-header>
<ion-navbar>
<ion-title>
{{show.title}}
</ion-title>
<ion-buttons end>
<button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectCurrentEpisode()">
<ion-icon name="skip-backward"></ion-icon>
</button>
<button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectNextEpisode()">
<ion-icon name="skip-forward"></ion-icon>
</button>
<button class="appbarButton" *ngIf="detail" ion-button icon-only (click)="changeFavorite()">
<ion-icon name="{{ (detail.favorite == true) ? 'star' : 'star-outline' }}"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
cordova ionic-framework ionic2 ionic3
asked Nov 22 '18 at 16:06
PaulPaul
130210
add a comment |
1
I have to succeed in making ion-navbar transparent.
I tried to put transparent, but it does not work.
"devDependencies": {
"@ionic/app-scripts": "2.1.3",
"ionic": "3.20.0",
"typescript": "2.3.4",
"electron": "^1.6.5"
},
page.html
<ion-header>
<ion-navbar>
<ion-title>
{{show.title}}
</ion-title>
<ion-buttons end>
<button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectCurrentEpisode()">
<ion-icon name="skip-backward"></ion-icon>
</button>
<button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectNextEpisode()">
<ion-icon name="skip-forward"></ion-icon>
</button>
<button class="appbarButton" *ngIf="detail" ion-button icon-only (click)="changeFavorite()">
<ion-icon name="{{ (detail.favorite == true) ? 'star' : 'star-outline' }}"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
cordova ionic-framework ionic2 ionic3
asked Nov 22 '18 at 16:06
PaulPaul
130210
yannbraga.com/2017/03/16/how-to-transparent-header-ionic2
– WhitehorseJJ
Nov 23 '18 at 0:03
codepen.io/tvial/pen/mJojJo
– WhitehorseJJ
Nov 23 '18 at 0:07
add a comment |
1
1
1
1
I have to succeed in making ion-navbar transparent.
I tried to put transparent, but it does not work.
"devDependencies": {
"@ionic/app-scripts": "2.1.3",
"ionic": "3.20.0",
"typescript": "2.3.4",
"electron": "^1.6.5"
},
page.html
<ion-header>
<ion-navbar>
<ion-title>
{{show.title}}
</ion-title>
<ion-buttons end>
<button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectCurrentEpisode()">
<ion-icon name="skip-backward"></ion-icon>
</button>
<button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectNextEpisode()">
<ion-icon name="skip-forward"></ion-icon>
</button>
<button class="appbarButton" *ngIf="detail" ion-button icon-only (click)="changeFavorite()">
<ion-icon name="{{ (detail.favorite == true) ? 'star' : 'star-outline' }}"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
cordova ionic-framework ionic2 ionic3
asked Nov 22 '18 at 16:06
PaulPaul
130210
I have to succeed in making ion-navbar transparent.
I tried to put transparent, but it does not work.
"devDependencies": {
"@ionic/app-scripts": "2.1.3",
"ionic": "3.20.0",
"typescript": "2.3.4",
"electron": "^1.6.5"
},
page.html
<ion-header>
<ion-navbar>
<ion-title>
{{show.title}}
</ion-title>
<ion-buttons end>
<button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectCurrentEpisode()">
<ion-icon name="skip-backward"></ion-icon>
</button>
<button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectNextEpisode()">
<ion-icon name="skip-forward"></ion-icon>
</button>
<button class="appbarButton" *ngIf="detail" ion-button icon-only (click)="changeFavorite()">
<ion-icon name="{{ (detail.favorite == true) ? 'star' : 'star-outline' }}"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
cordova ionic-framework ionic2 ionic3
cordova ionic-framework ionic2 ionic3
asked Nov 22 '18 at 16:06
PaulPaul
130210
asked Nov 22 '18 at 16:06
PaulPaul
130210
asked Nov 22 '18 at 16:06
PaulPaul
130210
asked Nov 22 '18 at 16:06
PaulPaul
130210
asked Nov 22 '18 at 16:06
PaulPaul
130210
130210
yannbraga.com/2017/03/16/how-to-transparent-header-ionic2
– WhitehorseJJ
Nov 23 '18 at 0:03
codepen.io/tvial/pen/mJojJo
– WhitehorseJJ
Nov 23 '18 at 0:07
add a comment |
yannbraga.com/2017/03/16/how-to-transparent-header-ionic2
– WhitehorseJJ
Nov 23 '18 at 0:03
codepen.io/tvial/pen/mJojJo
– WhitehorseJJ
Nov 23 '18 at 0:07
yannbraga.com/2017/03/16/how-to-transparent-header-ionic2
– WhitehorseJJ
Nov 23 '18 at 0:03
yannbraga.com/2017/03/16/how-to-transparent-header-ionic2
– WhitehorseJJ
Nov 23 '18 at 0:03
codepen.io/tvial/pen/mJojJo
– WhitehorseJJ
Nov 23 '18 at 0:07
codepen.io/tvial/pen/mJojJo
– WhitehorseJJ
Nov 23 '18 at 0:07
add a comment |
3 Answers
3
active
oldest
votes
1
Did you try to play with its opacity ? Try this :
HTML file :
<ion-navbar class="transparent-nav-bar">
<ion-title>
{{show.title}}
</ion-title>
</ion-navbar>
SCSS file :
.transparent-nav-bar {
opacity: 0;
}
answered Nov 22 '18 at 16:32
rguerinrguerin
50417
I tried as you say, but I can not make the transparent bar. To see the image below.
– Paul
Nov 22 '18 at 16:38
I just tried and it works fine. Try to inspect your element and be sure the CSS is not overrided by something else. Also make sure your selector is precise enough (maybe you should try with ion-navbar.transparent-nav-bar).
– rguerin
Nov 22 '18 at 16:58
I do not understand it's not working, how do I do the inspection? I'm using it on a physical device, not on a browser. Then the theming does not seem to support the rgba like this: "#0f000000".
– Paul
Nov 22 '18 at 17:08
Then it is better to put it on ion-header or ion-navbar, see code above.
– Paul
Nov 22 '18 at 17:10
add a comment |
1
Try adding a custom color in your src/theme/variables.scss file by adding a property in the $colors map and then call it like this.
<ion-navbar color="custom">
answered Nov 22 '18 at 16:45
itdoesntworkitdoesntwork
722519
I'm trying directly in the app / app.scss, but it does not seem to work.
– Paul
Nov 22 '18 at 16:48
Then it does not have to be a color must be seen, image below.
– Paul
Nov 22 '18 at 16:48
ionicframework.com/docs//theming/theming-your-app ionicframework.com/docs/2.0.1/api/components/navbar/Navbar
– itdoesntwork
Nov 22 '18 at 16:49
add a comment |
1
If you are trying to find the right class try this:
.toolbar-background.toolbar-background-md{
background-color: transparent;
}
answered Nov 22 '18 at 20:24
Rodrigo BauteRodrigo Baute
965
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434707%2fionic-ion-navbar-trasparent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Did you try to play with its opacity ? Try this :
HTML file :
<ion-navbar class="transparent-nav-bar">
<ion-title>
{{show.title}}
</ion-title>
</ion-navbar>
SCSS file :
.transparent-nav-bar {
opacity: 0;
}
answered Nov 22 '18 at 16:32
rguerinrguerin
50417
I tried as you say, but I can not make the transparent bar. To see the image below.
– Paul
Nov 22 '18 at 16:38
I just tried and it works fine. Try to inspect your element and be sure the CSS is not overrided by something else. Also make sure your selector is precise enough (maybe you should try with ion-navbar.transparent-nav-bar).
– rguerin
Nov 22 '18 at 16:58
I do not understand it's not working, how do I do the inspection? I'm using it on a physical device, not on a browser. Then the theming does not seem to support the rgba like this: "#0f000000".
– Paul
Nov 22 '18 at 17:08
Then it is better to put it on ion-header or ion-navbar, see code above.
– Paul
Nov 22 '18 at 17:10
add a comment |
1
Did you try to play with its opacity ? Try this :
HTML file :
<ion-navbar class="transparent-nav-bar">
<ion-title>
{{show.title}}
</ion-title>
</ion-navbar>
SCSS file :
.transparent-nav-bar {
opacity: 0;
}
answered Nov 22 '18 at 16:32
rguerinrguerin
50417
I tried as you say, but I can not make the transparent bar. To see the image below.
– Paul
Nov 22 '18 at 16:38
I just tried and it works fine. Try to inspect your element and be sure the CSS is not overrided by something else. Also make sure your selector is precise enough (maybe you should try with ion-navbar.transparent-nav-bar).
– rguerin
Nov 22 '18 at 16:58
I do not understand it's not working, how do I do the inspection? I'm using it on a physical device, not on a browser. Then the theming does not seem to support the rgba like this: "#0f000000".
– Paul
Nov 22 '18 at 17:08
Then it is better to put it on ion-header or ion-navbar, see code above.
– Paul
Nov 22 '18 at 17:10
add a comment |
1
1
1
Did you try to play with its opacity ? Try this :
HTML file :
<ion-navbar class="transparent-nav-bar">
<ion-title>
{{show.title}}
</ion-title>
</ion-navbar>
SCSS file :
.transparent-nav-bar {
opacity: 0;
}
answered Nov 22 '18 at 16:32
rguerinrguerin
50417
Did you try to play with its opacity ? Try this :
HTML file :
<ion-navbar class="transparent-nav-bar">
<ion-title>
{{show.title}}
</ion-title>
</ion-navbar>
SCSS file :
.transparent-nav-bar {
opacity: 0;
}
answered Nov 22 '18 at 16:32
rguerinrguerin
50417
answered Nov 22 '18 at 16:32
rguerinrguerin
50417
answered Nov 22 '18 at 16:32
rguerinrguerin
50417
answered Nov 22 '18 at 16:32
rguerinrguerin
50417
50417
I tried as you say, but I can not make the transparent bar. To see the image below.
– Paul
Nov 22 '18 at 16:38
I just tried and it works fine. Try to inspect your element and be sure the CSS is not overrided by something else. Also make sure your selector is precise enough (maybe you should try with ion-navbar.transparent-nav-bar).
– rguerin
Nov 22 '18 at 16:58
I do not understand it's not working, how do I do the inspection? I'm using it on a physical device, not on a browser. Then the theming does not seem to support the rgba like this: "#0f000000".
– Paul
Nov 22 '18 at 17:08
Then it is better to put it on ion-header or ion-navbar, see code above.
– Paul
Nov 22 '18 at 17:10
add a comment |
I tried as you say, but I can not make the transparent bar. To see the image below.
– Paul
Nov 22 '18 at 16:38
I just tried and it works fine. Try to inspect your element and be sure the CSS is not overrided by something else. Also make sure your selector is precise enough (maybe you should try with ion-navbar.transparent-nav-bar).
– rguerin
Nov 22 '18 at 16:58
I do not understand it's not working, how do I do the inspection? I'm using it on a physical device, not on a browser. Then the theming does not seem to support the rgba like this: "#0f000000".
– Paul
Nov 22 '18 at 17:08
Then it is better to put it on ion-header or ion-navbar, see code above.
– Paul
Nov 22 '18 at 17:10
I tried as you say, but I can not make the transparent bar. To see the image below.
– Paul
Nov 22 '18 at 16:38
I tried as you say, but I can not make the transparent bar. To see the image below.
– Paul
Nov 22 '18 at 16:38
I just tried and it works fine. Try to inspect your element and be sure the CSS is not overrided by something else. Also make sure your selector is precise enough (maybe you should try with ion-navbar.transparent-nav-bar).
– rguerin
Nov 22 '18 at 16:58
I just tried and it works fine. Try to inspect your element and be sure the CSS is not overrided by something else. Also make sure your selector is precise enough (maybe you should try with ion-navbar.transparent-nav-bar).
– rguerin
Nov 22 '18 at 16:58
I do not understand it's not working, how do I do the inspection? I'm using it on a physical device, not on a browser. Then the theming does not seem to support the rgba like this: "#0f000000".
– Paul
Nov 22 '18 at 17:08
I do not understand it's not working, how do I do the inspection? I'm using it on a physical device, not on a browser. Then the theming does not seem to support the rgba like this: "#0f000000".
– Paul
Nov 22 '18 at 17:08
Then it is better to put it on ion-header or ion-navbar, see code above.
– Paul
Nov 22 '18 at 17:10
Then it is better to put it on ion-header or ion-navbar, see code above.
– Paul
Nov 22 '18 at 17:10
add a comment |
1
Try adding a custom color in your src/theme/variables.scss file by adding a property in the $colors map and then call it like this.
<ion-navbar color="custom">
answered Nov 22 '18 at 16:45
itdoesntworkitdoesntwork
722519
I'm trying directly in the app / app.scss, but it does not seem to work.
– Paul
Nov 22 '18 at 16:48
Then it does not have to be a color must be seen, image below.
– Paul
Nov 22 '18 at 16:48
ionicframework.com/docs//theming/theming-your-app ionicframework.com/docs/2.0.1/api/components/navbar/Navbar
– itdoesntwork
Nov 22 '18 at 16:49
add a comment |
1
Try adding a custom color in your src/theme/variables.scss file by adding a property in the $colors map and then call it like this.
<ion-navbar color="custom">
answered Nov 22 '18 at 16:45
itdoesntworkitdoesntwork
722519
I'm trying directly in the app / app.scss, but it does not seem to work.
– Paul
Nov 22 '18 at 16:48
Then it does not have to be a color must be seen, image below.
– Paul
Nov 22 '18 at 16:48
ionicframework.com/docs//theming/theming-your-app ionicframework.com/docs/2.0.1/api/components/navbar/Navbar
– itdoesntwork
Nov 22 '18 at 16:49
add a comment |
1
1
1
Try adding a custom color in your src/theme/variables.scss file by adding a property in the $colors map and then call it like this.
<ion-navbar color="custom">
answered Nov 22 '18 at 16:45
itdoesntworkitdoesntwork
722519
Try adding a custom color in your src/theme/variables.scss file by adding a property in the $colors map and then call it like this.
<ion-navbar color="custom">
answered Nov 22 '18 at 16:45
itdoesntworkitdoesntwork
722519
answered Nov 22 '18 at 16:45
itdoesntworkitdoesntwork
722519
answered Nov 22 '18 at 16:45
itdoesntworkitdoesntwork
722519
answered Nov 22 '18 at 16:45
itdoesntworkitdoesntwork
722519
722519
I'm trying directly in the app / app.scss, but it does not seem to work.
– Paul
Nov 22 '18 at 16:48
Then it does not have to be a color must be seen, image below.
– Paul
Nov 22 '18 at 16:48
ionicframework.com/docs//theming/theming-your-app ionicframework.com/docs/2.0.1/api/components/navbar/Navbar
– itdoesntwork
Nov 22 '18 at 16:49
add a comment |
I'm trying directly in the app / app.scss, but it does not seem to work.
– Paul
Nov 22 '18 at 16:48
Then it does not have to be a color must be seen, image below.
– Paul
Nov 22 '18 at 16:48
ionicframework.com/docs//theming/theming-your-app ionicframework.com/docs/2.0.1/api/components/navbar/Navbar
– itdoesntwork
Nov 22 '18 at 16:49
I'm trying directly in the app / app.scss, but it does not seem to work.
– Paul
Nov 22 '18 at 16:48
I'm trying directly in the app / app.scss, but it does not seem to work.
– Paul
Nov 22 '18 at 16:48
Then it does not have to be a color must be seen, image below.
– Paul
Nov 22 '18 at 16:48
Then it does not have to be a color must be seen, image below.
– Paul
Nov 22 '18 at 16:48
ionicframework.com/docs//theming/theming-your-app ionicframework.com/docs/2.0.1/api/components/navbar/Navbar
– itdoesntwork
Nov 22 '18 at 16:49
ionicframework.com/docs//theming/theming-your-app ionicframework.com/docs/2.0.1/api/components/navbar/Navbar
– itdoesntwork
Nov 22 '18 at 16:49
add a comment |
1
If you are trying to find the right class try this:
.toolbar-background.toolbar-background-md{
background-color: transparent;
}
answered Nov 22 '18 at 20:24
Rodrigo BauteRodrigo Baute
965
add a comment |
1
If you are trying to find the right class try this:
.toolbar-background.toolbar-background-md{
background-color: transparent;
}
answered Nov 22 '18 at 20:24
Rodrigo BauteRodrigo Baute
965
add a comment |
1
1
1
If you are trying to find the right class try this:
.toolbar-background.toolbar-background-md{
background-color: transparent;
}
answered Nov 22 '18 at 20:24
Rodrigo BauteRodrigo Baute
965
If you are trying to find the right class try this:
.toolbar-background.toolbar-background-md{
background-color: transparent;
}
answered Nov 22 '18 at 20:24
Rodrigo BauteRodrigo Baute
965
answered Nov 22 '18 at 20:24
Rodrigo BauteRodrigo Baute
965
answered Nov 22 '18 at 20:24
Rodrigo BauteRodrigo Baute
965
answered Nov 22 '18 at 20:24
Rodrigo BauteRodrigo Baute
965
965
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434707%2fionic-ion-navbar-trasparent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
yannbraga.com/2017/03/16/how-to-transparent-header-ionic2
– WhitehorseJJ
Nov 23 '18 at 0:03
codepen.io/tvial/pen/mJojJo
– WhitehorseJJ
Nov 23 '18 at 0:07