Fixed Navbar issue

I have an App with 3 inline pages for which I would like to have a fixed navbar different for every page.

Code as follow:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Scripts -->
    <script src="cordova.js"></script>
    <script type="text/javascript" src="js/framework7.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/something.js"></script>   
    <script type="text/javascript" src="js/another.js"></script>
    <!-- End scripts -->
    <!-- Styles -->
        if ( {
                '<link rel="stylesheet" href="css/framework7.material.min.css">' +
                '<link rel="stylesheet" href="css/framework7.material.colors.min.css">'
        else {
            '<link rel="stylesheet" href="css/framework7.ios.min.css">' +
            '<link rel="stylesheet" href="css/framework7.ios.colors.min.css">'
    <!-- End styles -->
<body >
    <!-- Views-->
    <div class="views">
      <div class="view view-main">
        <div class="pages navbar-fixed toolbar-fixed">
            <div data-page="index" class="page">  
                <div class="navbar">
                    <div class="navbar-inner" data-page="index" >
                    <div class="center">Index</div>
                    <div class="page-content">
                            <a href="#about">about</a>
                            <a href="#formPage">form    </a>
                    </div> <!--page content-->
            </div> <!--end data-page="index"-->

            <div data-page="formPage" class="page cached">
                <div class="navbar">
                    <div class="navbar-inner cached " data-page="formPage">
                    <div class="center">formPage</div>
                <div class="page-content">
                            form page
                </div><!--page content-->
            </div><!--           end data-page="formPage" -->
            <div data-page="about" class="page cached">       
                      <!-- Top Navbar-->
                <div class="navbar">
                    <div class="navbar-inner cached" data-page="about">
                    <div class="center">A</div>
                <div class="page-content">
                        about page
            </div> <!--end page about-->
        </div> <!--end div class="pages"-->

      </div><!--end div class="view view main"-->
    </div><!--end div class="views"-->

Problem is that only the navbar of last page is visible…

What am I doing wrong?


If you have fixed navbars, don’t use cached class on navbar-inner. Also don’t forget to disable dynamicNavbar option

Thank you.
I will give it a try tonight.

Just to be sure…
Today I have

var mainView = myApp.addView('.view-main', {    
    //         dynamicNavbar: true, //20171117 Commented out as this creates issues with the FIXED ios Layout in calling page back
    domCache: true //enable inline pages`

Note that is commented out.
Shall I change to an explicit false like:

var mainView = myApp.addView('.view-main', {    
   dynamicNavbar: false, 
   domCache: true //enable inline pages`


No in v1 it is disabled by default

Ok, found it. In add to “cached” I forgot to remove from js code:

// Change Through navbar layout to Fixed
if (isAndroid) {
    // Change class
    // And move Navbar into Page
    $$('.view .navbar').prependTo('.view .page');

Now all is fine!