I changed the header in the kitchen sink to common. When you scroll the index.html page content through all of the F7 features pages it works fine on iOS but on Chrome desktop and Android 8.0.0 (Samsung Galaxy S7 Edge) it appears to scroll over the top of the navbar (like the navbar has a lower z-order). See attached.
UPDATE: I should note that this is with the VERY latest version of F7 (5.2.0). I downloaded it after I noticed that @nolimits4web added the feature of displaying the accordion chevron on the opposite side (thanks for that, it really is nicer!).
UPDATE: I changed the z-index of the navbar to 18 (same as fixed toolbar used as a footer) and also back to 500 and to 999 and did all of those without the fixed footer and still no luck.
All I’ve done is modify the kitchensink (core). I moved this from the “page” in the index.html to outside the page as per the example in the docs. I commented out the search bar and tried to add my own icon and badge, I didn’t change any of the existing classes.
In fact the following code is from the core kitchen sink in the latest version (5.2.0):
Fixed navbar is also part of the page but it is always visible on screen not depending on page scroll. In this case it must be a direct child of page and if page has also fixed toolbar then it must be BEFORE the toolbar: Fixed Navbar must always be a direct child of a page and BEFORE the toolbar (if fixed toolbar is used on this page)
If you move it out of the page, then you need to add navbar-large class as well
And that still doesn’t tell me to add the navbar-large so is that still required?
Update: Adding navbar-large actually caused problems. Removing navbar-large-transparent fixed the issue in Chrome and now testing on Android and iPhone.
Update: removing navbar-large-transparent fixed the problem on Android. The final cut is exactly as the documentation states: