Kitchen sink scrolling over common header

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.

scroll-bug|690x381

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.

Any reason why you have navbar-large-transparent and doesn’t have navbar-large class?

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):

        <div class="navbar navbar-large-transparent">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="left">
              <a href="#" class="link icon-only panel-open" data-panel="left">
                <i class="icon f7-icons if-not-md">menu</i>
                <i class="icon material-icons md-only">menu</i>
              </a>
            </div>
            <div class="title sliding">Framework7</div>
            <div class="right">
              <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
                <i class="icon f7-icons if-not-md">search</i>
                <i class="icon material-icons md-only">search</i>
              </a>
            </div>
            <div class="title-large">
              <div class="title-large-text">Framework7</div>
            </div>
            <form data-search-container=".components-list" data-search-in="a" class="searchbar searchbar-expandable searchbar-components searchbar-init">
              <div class="searchbar-inner">
                <div class="searchbar-input-wrap">
                  <input type="search" placeholder="Search components"/>
                  <i class="searchbar-icon"></i>
                  <span class="input-clear-button"></span>
                </div>
                <span class="searchbar-disable-button if-not-aurora">Cancel</span>
              </div>
            </form>
          </div>
        </div>

Should I add navbar-large in line with but before the navbar-large-transparent class like this?

       <div class="navbar navbar-large navbar-large-transparent">

Where did you see such in docs?
https://framework7.io/docs/navbar.html#fixed-navbar-type

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

I’m sorry, I shouldn’t have used the word “fixed” as I was aiming for the “common” navbar as documented here:
https://framework7.io/docs/navbar.html#common-navbar-type

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:

<div class="navbar">...</div>
1 Like