NAVBAR....Change color when move list view

[Joak]

Hi guys.

I have on the main view, the navbar with transparent color, on the page-content I have a List View component, so when I slide the List view, the navbar color starts to change color, first gray and finish white
I don’t want change color, any ideas?

Start…

I start to move the list view

I keep moving forward

html…

<div class="page img_home" data-name="home">
  <!-- NavBar    -->
  <div class="navbar navbar-transparent">
    <div class="navbar-bg"></div>   
    <div class="navbar-inner">
      <div class="left">

      </div>
      <div class="title navbar-tipo-letra"></div> 
    </div>
  </div>

  <!-- Bottom Toolbar -->

  <div class="toolbar toolbar-bottom toolbar-custom">
    <div class="toolbar-inner">
      <!-- Toolbar links -->
      <a href="#" class="link my-link.active-state">
        <i class="icon f7-icons">start</i>
        <span>Inicio</span>
      </a>

      <a href="/settings/" class="link">
        <i class="icon f7-icons color-white">gear_alt</i>
        <span class="my-color-off">Configurar</span>
      </a>
    </div>
  </div>

  <div class="page-content">
    <div class="list" id="lista-torneos">
      <div class="block-torneo">
        <div class="torneo">
          <img src="http://.com.mx/MiScore/Imagenes/Torneo_1_1_1.png"/>
        </div>
      </div>
  </div>
</div>

CSS…

.img_home{
    background-size: cover;
    background-image: url(../img/BackGroundDefault.png);
}

.my-color-off{
    color: white;
}

.list{
    margin-top: 15px;
}

.block-torneo{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

.torneo{
    width: 100%;
    overflow: hidden;
}

.torneo img{
    width: 100%;
    height: auto;
  }

[kerrydp]

It’s not changing colour, it’s fading in the opacity to become solid. That’s the intended behaviour, so when the user scrolls your content, the Navbar appears. The term ‘transparent Navbar’ is used because whatever interface elements it hides are only relevant when the user has scrolled down your page.

For example, an article might include it’s title at the top of the text. As you scroll down, the title of the article is no longer shown. So the transparent Navbar then appears, showing the article title.

What is your intended use of the transparent navbar? If you didn’t expect it to appear, what was the original purpose for you?

[Joak]

Hi Kerry

Thanks for the explanation about the “transparent navbar”.

When the user tap on one of the item list, the view change and I want to show the “title” of that view, but I want transparent bar like this …

When you scrolls, never change the navbar, you always see the background-image .

Definitive on home view I don’t need navbar, but what happens when the user change the view?

[kerrydp]

Try adjusting the CSS variable that controls the background colour
--f7-navbar-bg-color: transparent !important;

[Joak]

Hi Kerry

Let me work on the second view and see how works … Thanks