Multiple Navbar Large don't works

Questions
1

I have problems with navbar large on the second tab page

First tab:

          <div data-name="home" class="page">
              
            <div class="navbar navbar-large">
              <div class="navbar-bg"></div>
              <div class="navbar-inner">
                <div class="left">
                  ...
                </div>
                <div class="title">My App</div>
                <div class="right"> ... </div>
             
                <div class="title-large">
                  <div class="title-large-text">My App</div>
                </div>
              </div>
            </div>
             <div id="content" class="page-content" ></div>
           </div></div>

Second tab:

        <div data-name="second" class="page">
            
          <div class="navbar navbar-large">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="left">
                ...
              </div>
              <div class="title">My App</div>
              <div class="right">
                ...
              </div>
              <div class="title-large">
                <div class="title-large-text">My App</div>
              </div>
            </div>
          </div>

and content…

What’s the problem?

2

Is it a single page or what? Single page can’t really have more than one navbar

3

Is a tabbed Views with multiple page (https://framework7.io/docs/tabs.html#views-as-tabs)

.view1
.page
.navbar
.page-content

.view2
.page
.navbar
.page-content

With normal navbar (not large) everything works perfectly

4

I create a pen with the code, please take a look

https://codepen.io/acer620/pen/ExVYGpp
@nolimits4web

5

Why do you need a second navbar? The tab buttons at the bottom should only be replacing which content is shown within the body of the page. If the navbar title needs to change, just change the text in code when the tab is engaged.

6

Because navbar in

.app
  .views .tabs
    .navbar

doesn’t show

https://codepen.io/acer620/pen/GRpRpEd

7

Ok, it happens because you didn’t initialize second View-Tab, try to add view-init class to second view

1 Like
8

Yess! Thank you, you’re best! <3