Fixed Navbar issue

Questions
1

Hi,
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>
<html>
  <head>
    <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">
    <title>MyApp</title>
    <!-- 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 -->
    <script>
        if (Framework7.prototype.device.android) {
            document.write(
                '<link rel="stylesheet" href="css/framework7.material.min.css">' +
                '<link rel="stylesheet" href="css/framework7.material.colors.min.css">'
            );
        }
        else {
            document.write(
            '<link rel="stylesheet" href="css/framework7.ios.min.css">' +
            '<link rel="stylesheet" href="css/framework7.ios.colors.min.css">'
            );
        }
    </script>
    <!-- End styles -->
  </head>
<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>
                </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>
                </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>
                </div>
                <div class="page-content">
                        about page
                </div>
            </div> <!--end page about-->
          
        </div> <!--end div class="pages"-->

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

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

What am I doing wrong?

Thanks

2

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

3

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`
});

?

4

No in v1 it is disabled by default

5

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

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

Now all is fine!

Thanks!