Large Title not collapsing

Questions
1

I am trying to make a collapsing large title navbar however when I scroll it does not collapse. Here is my code.

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.4.10/css/framework7.bundle.min.css">
        <title></title>
      </head>
      <body>
        <div class="page">
      <div class="navbar">
        <div class="navbar-inner sliding">
          <div class="left">
            <a class="link back">
              <i class="icon icon-back"></i>
              <span class="if-not-md">Back</span>
            </a>
          </div>
          <div class="title">Hide On Scroll</div>
        </div>
      </div>
      <!-- Additional "hide-navbar-on-scroll" class to hide navbar on scroll automatically -->
      <div class="page-content hide-navbar-on-scroll">
        <div class="block">
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          ...
        </div>
      </div>
    </div>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.4.10/js/framework7.bundle.min.js"></script>
        <script type="text/javascript">
          var app = new Framework7({

      root: '#app',
      view: {
        iosDynamicNavbar: true,
      },

      name: 'My App',

      id: 'com.myapp.test',

      theme: 'auto',

      routes: [
        {
          path: '/about/',
          url: 'about.html',
        },
      ],

    });
        </script>
      </body>
    </html>
2

Hi, you have a wrong app layout. Where is the app container element, where is the View element. I recommend you to create new F7 project with F7 CLI as it has all set correctly and modify it to your needs.