Navbar

Menus superiores com comportamento particular

Transparente fixo no topo

Navbar com estado inicial transparente para sobrepor hero imagens coloridas que assume estilo ao descer a scroll

Obs.: Use o scroll da página inteira para ver o efeito dentro do frame.

Topo da página móvel

Navbar móvel no topo da página


            <nav class="navbar navbar-expand-md navbar-dark fixed-top p-5" id="navbar-transparent" style="position: relative">
              <div class="container d-flex flex-md-row">
                <div class="logo">
                   <a href="#" title="Acsiv Sistemas"><img id="logo-img" src="../img/logotipo/acsiv_negativo.svg" alt="Acsiv Logotipo"></a>
                </div>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                  <ul class="navbar-nav ml-auto" id="navspy">
                    <li class="nav-item">
                      <a class="nav-link" href="#" title="Soluções">Item 1</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" title="Soluções">Item 2</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>


             <nav class="navbar navbar-expand-md navbar-light bg-white drop-shadow">
                <div class="container d-flex flex-md-row">
                  <div class="logo">
                      <a href="#" title="Acsiv Sistemas"><img id="logo-img" src="../img/logotipo/acsiv_negativo.svg" alt="Acsiv Logotipo"></a>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav ml-auto" id="navspy">
                      <li class="nav-item">
                        <a class="nav-link" href="#" title="Soluções">Item 1</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#" title="Soluções">Item 2</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </nav>