On one page of my app I have a large heading banner with a background image ( a bit like the demo-card-header-pic example for cards ). I have set no-margin so it fills the screen width but now I want it to start from the very top of the screen and make the navbar transparent and borderless.
I want the page content to start underneath the navbar, so the effect is just a floating back button over the top of the image.
How would I do this?
I’ve come up with something but it’s terrible because firstly it breaks in md theme, but it also glitches occasionally on ios and I’ve taken out the navbar-inner class so this must be causing some problems. But the idea is to have a slight gradient under the back button to make it visible on any image, light or dark
<div class="navbar nav-transparent no-hairline">
<div class="padding-left padding-bottom scrim-navbar">
<a href="#" class="link back text-color-white">
<i class="icon icon-back color-white"></i>
<span class="ios-only">Back</span>
</a>
</div>
</div>
<div class="page-content no-padding">
<!-- background image on a div -->
</div>
And CSS:
.navbar-transparent {
background: transparent !important;
}
.scrim-navbar {
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
}
I don’t like making hacks to such a well thought out framework. Is there a nicer, neater cross-platform solution??
You shouldn’t it is mandatory.
It is better to assign/remove extra class to navbar based on currently active page, e.g. within pageBeforeIn callback
Please could you elaborate on how I would do this. I found that even setting css background : transparent !important on the navbar-inner has no affect ( I guess because of css transition occurring ).
Navbar inner has no background. It must be set on navbar
How come the following makes the navbar transparent :
<div class="navbar navbar-transparent no-hairline">
<div class="padding-left padding-bottom scrim-navbar">
<a href="#" class="link back text-color-white">
<i class="icon icon-back color-white"></i>
<span class="ios-only">Back</span>
</a>
</div>
</div>
… and the following does not? :
<div class="navbar navbar-transparent no-hairline">
<div class="navbar-inner sliding scrim-navbar">
<a href="#" class="link back text-color-white">
<i class="icon icon-back color-white"></i>
<span class="ios-only">Back</span>
</a>
</div>
</div>
It must have something to do with navbar-inner right? Could you advise?
I now see what you were saying about adding and removing the navbar-transparent class on the page events. The problem with this is that after the first page transition there and back; it starts to look glitchy because the navbar goes transparent on the previous page before transitioning out. Can you see what I mean?
pageBeforeIn: function () {
$$('.navbar').addClass('navbar-transparent no-hairline');
},
pageAfterOut: function () {
$$('.navbar').removeClass('navbar-transparent no-hairline');
},pageBeforeout => pageBeforeOut
Yea I spotted that, was actually just a typo on the post not in my code. But this doesn’t change the problem.
Could it be that $$(’.navbar’) is targeting the nabber from the previous page?
The strange thing is, if I call console.log( $$('#page-id .navbar') ); it returns no element. Am I missing something obvious? Is the navbar removed from the Dom before rendering?
go to http://framework7.io/kitchen-sink/
open console:
app.views.current.routes.unshift({
path: '/test/',
url: './pages/about.html',
setNavbar:function(page,color){
var navContainer=page.$navbarEl.length?page.$navbarEl:page.$pageEl;
var method=page.$navbarEl.length?'closest':'find';
navContainer[method]('.navbar').css('background',color);
},
on:{
pageMounted:function(e,page){
page.route.route.setNavbar(page,'transparent');
},
pageBeforeOut:function(e,page){
var color=app.theme==='md'?'#2196f3':'#f7f7f8';
page.route.route.setNavbar(page,color);
}
}
});
app.views.current.router.navigate('/test/');
Thanks. This doesn’t solve the problem of the previous page’s navbar being affected by the transparency. ( this problem is iOS only ).
just consider that in ios-theme
this :
<div class="navbar">
<div class="navbar-inner">
</div>
</div>
is equivalent to this :
<template>
<div class="navbar-inner">
</div>
</template>
and everything will be clear to you
Why is this? So what you’re saying is that $$(’.navbar’) is not targeting what I think it is?
The reason it so obvious for me on the iOS theme is because my previous page is a list and when scrolled down there’s content behind the navbar. This content then flickers in sight before the page transitions on the page where I want the transparent navbar.
this page :
<div class="page my-page-class">
<div class="navbar you-not-gonna-see-this-class">
<div class="navbar-inner my-navbar-class">
</div>
</div>
<div class="page-content"></div>
</div>
will be parsed like this :
<div class="navbar">
<div class="navbar-inner my-navbar-class">
</div>
</div>
<div class="page my-page-class">
<div class="page-content"></div>
</div>
my example works ok on kitchen-sink
try this :
pageAfterIn:function(e,page){
page.route.route.setNavbar(page,'transparent');
},
I’m essentially doing the same thing by doing this:
// Script
pageBeforeIn: function (e, page) {
page.$navbarEl.parent().addClass('navbar-transparent no-hairline');
},
pageBeforeOut: function (e, page) {
page.$navbarEl.parent().removeClass('navbar-transparent no-hairline');
},
// CSS
.navbar-transparent {
background: transparent !important;
}
But the result is still that the previous navbar is changed before transitioning out. Nothing is working, maybe @nolimits4web can shed some light.
use (pageMounted || pageInit || pageBeforeIn || pageAfterIn) to addClass
and (pageBeforeOut || pageAfterOut || pageBeforeRemove) to removeClass
You likely need to set transition-duration: 400ms to navbar for iOS theme. So it is a same navbar for app pages, so it should change its background opacity for this duration to get more smooth behavior