Make navbar transparent and allow page content to start from top of screen

Questions
21

Where should I set the style? Are you suggesting just adding the general css rule?

.ios .navbar {
  transition-duration: 400ms;
}

I don’t notice a difference, either way, it still makes the transitions feel really clunky. Is there no way to just have the page I’m transitioning to go over the previous page including the navbar.?

22

Can you please provide a JSFiddle with minimal setup to what you are trying to do?

23

Here you go:

https://jsfiddle.net/juliusbangert/q1evhxrt/5/

I had to fill out the list page to demonstrate the effect I’m describing… so if you scroll down the list before transitioning to the next page you’ll see what I mean about the glitchy nav bar transparency.

Sorry the jsFiddle is a bit convoluted, wanted to clean it up with handlebar syntax but couldn’t get that working.
The transitions are happening faster in my browser so the problem is more apparent when running on an iOS device.

24

Something like https://jsfiddle.net/cqqzp5zo/

25

Is it not possible to just have the new page content slide over the previous pages navbar?

26

Possible by setting iosDynamicNavbar: false in router settings, then it won’t use single navbar for pages

27

I was playing around with that on Friday. Is it possible to just disable it for one particular page transition but keep the iosDynamicNavbar everywhere else ?

28

No, it won’t work, because whole app structure depends on it. You can just disable navbar for single page by adding no-navbar class to the page and implement your own element on this page

29

I think that is probably the best option for now, feels a bit hacked but I think I’ll do this for now. Is there a recommended implementation of this if I have a pull-to-refresh on the page?

30

How do I use pull-to-refresh with .no-navbar class? I see in the css there is a class and styles for .ptr-no-navbar.

I want to have no navbar as I discussed above, but I also want the pull to refresh functionality.

31

I asked this as a separate question because I thought it was enough of a new topic.

32

In CSS, there is no property such as transparancy. But, you can achieve transparancy by inserting a pseudo element with regular opacity the exact size of the element behind it. The CSS3 property for transparent is opacity and it is a part of the W3C CSS3 recommendation.

div
{
  opacity: 0.6;
}

The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).