Large Title not collapsing

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">
        <meta charset="utf-8">
        <link rel="stylesheet" href="">
        <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>
          <div class="title">Hide On Scroll</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>

        <script type="text/javascript" src=""></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',


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.