Large nav-title inside page-content

Questions
1

Here’s something I don’t know, if I’m mis-interpreting something, and couldn’t find an answer in the docs.

Here’s a snippet from my ‘home.vue’ page (mostly from a clean PWA created by the f7-cli) for f7-vue v5.4.2:

<!-- Top Navbar -->
<f7-navbar :sliding="true" large-transparent>
  <f7-nav-left>
    <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
  </f7-nav-left>
  <f7-nav-title sliding>Test</f7-nav-title>
  <f7-nav-right>
    <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="right"></f7-link>
  </f7-nav-right>
       <f7-nav-title-large sliding>TEST</f7-nav-title-large>
</f7-navbar>

<!-- Page content-->
<f7-block>
  <f7-block-title>Markdown 0</f7-block-title>

…

which renders to this:

image
image874×204 6.54 KB

Q: Shouldn’t F7 take proper top-margins into accout ‘out of the box’ or do I need to do something else, so the page-content is rendered properly?

thx

2

I don’t know Vue, but if you were doing a core project, I’d say you’d be missing a style for the large text:

<div class="title-large">
      <div class="title-large-text">My App</div>
    </div>

Can you add title-large-text to your file and see what happens?

3

hi @kerrydp

both .navbar .title-large and .navbar .title-large-text are there…

4

Aaahhh…

the navbar itself needs both properties large AND large-transparent… on the navbar, then it works:

<f7-navbar :sliding="true" large large-transparent>
1 Like