title: How can I avoid the overlap that happens in Framework7 between the navbars when using the material Android theme?
body: <p>I'm using Framework7 to build a hybrid mobile application. </p>
  
  <p>However, I have a problem with the Android version. When I go from the main page to another page by clicking the side menu links I have headers overlapping as you see in the picture. Basically the "App" written in the header of the index.html page overlaps with the "Back" arrow of the about.html page as in the picture below . How can I avoid this?<br>
  <a href="https://i.stack.imgur.com/5mwka.png" rel="nofollow noreferrer">first page of app</a></p>
  
  <p><a href="https://i.stack.imgur.com/sGysN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sGysN.png" alt="enter image description here"></a></p>
  
  <p>The index.html page 
      ` </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags--&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
      &lt;!-- Your app title --&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;!-- Path to Framework7 iOS CSS theme styles--&gt;
      &lt;!--&lt;link rel="stylesheet" href="css/framework7.ios.min.css"&gt;
      &lt;!-- Path to Framework7 iOS related color styles --&gt;
      &lt;!--&lt;link rel="stylesheet" href="css/framework7.ios.colors.min.css"&gt;--&gt;
      &lt;!-- Path to your custom app styles--&gt;
  
      &lt;link rel="stylesheet" href="css/my-app.css"&gt;
      &lt;link rel="stylesheet" href="css/framework7.material.min.css"&gt;
    &lt;link rel="stylesheet" href="css/framework7.material.colors.min.css"&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!-- Status bar overlay for full screen mode (PhoneGap) --&gt;
      &lt;div class="statusbar-overlay"&gt;&lt;/div&gt;
      &lt;!-- Panels overlay--&gt;
      &lt;div class="panel-overlay"&gt;&lt;/div&gt;
      &lt;!-- Left panel with reveal effect--&gt;
      &lt;div class="panel panel-left panel-reveal"&gt;
        &lt;div class="content-block"&gt;
          &lt;p&gt;Left panel content goes here&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Views --&gt;
      &lt;div class="views"&gt;
        &lt;!-- Your main view, should have "view-main" class --&gt;
        &lt;div class="view view-main"&gt;
          &lt;!-- Top Navbar--&gt;
          &lt;div class="navbar"&gt;
            &lt;div class="navbar-inner"&gt;
              &lt;!-- We need cool sliding animation on title element, so we have additional "sliding" class --&gt;
              &lt;div class="center sliding"&gt;App&lt;/div&gt;
              &lt;div class="right"&gt;
                &lt;!-- 
                  Right link contains only icon - additional "icon-only" class
                  Additional "open-panel" class tells app to open panel when we click on this link
                --&gt;
                &lt;a href="#" class="link icon-only open-panel"&gt;&lt;i class="icon icon-bars"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes--&gt;
          &lt;div class="pages navbar-through toolbar-through"&gt;
            &lt;!-- Page, "data-page" contains page name --&gt;
            &lt;div data-page="index" class="page"&gt;
              &lt;!-- Scrollable page content --&gt;
              &lt;div class="page-content"&gt;
                &lt;p&gt;Page content goes here&lt;/p&gt;
                &lt;!-- Link to another page --&gt;
                &lt;a href="about.html"&gt;About app&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Bottom Toolbar--&gt;
          &lt;div class="toolbar"&gt;
            &lt;div class="toolbar-inner"&gt;
              &lt;!-- Toolbar links --&gt;
              &lt;a href="#" class="link"&gt;Link 1&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Path to Framework7 Library JS--&gt;
      &lt;script type="text/javascript" src="js/framework7.min.js"&gt;&lt;/script&gt;
      &lt;!-- Path to your app js--&gt;
      &lt;script type="text/javascript" src="js/my-app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>And this is the about.html page<br>
      </p>
  
  <pre><code> &lt;!-- Top Navbar--&gt;
  &lt;div class="navbar"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="left"&gt;
        &lt;a href="#" class="back link"&gt;
          &lt;i class="icon icon-back"&gt;&lt;/i&gt;
          &lt;span&gt;Back&lt;/span&gt;
         &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="center sliding"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;a href="#" class="link icon-only open-panel"&gt;&lt;i class="icon icon-bars"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="pages"&gt;
    &lt;div data-page="about" class="page"&gt;
      &lt;div class="page-content"&gt;
        &lt;div class="content-block"&gt;
          &lt;p&gt;Here is About page!&lt;/p&gt;
          &lt;p&gt;Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; `
  </code></pre>