Topo Flutuante

Snippet para criar um topo flutuante.

Lembrando que no exemplo usamos apenas a logo e uma mensagem de bem-vindo para o cliente realizar o login ou o cadastro, mas você pode utilizar qualquer elemento que deseje

HTML

{#
  # Topo Flutuante
  # elements/snippets/topo_flutuante.html
#}
<div class="header-fixed">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-4 logo">
        <a href="{{ links.home }}" data-tray-tst="logotipo_loja">{{ Image('logo') }}</a>
      </div>
      <div class="hidden-xs col-sm-8 header-customer">
        <div class="login" data-tray-tst="saudacao">
          <span class="tray-hide" data-logged-user="true">
            {{ Translation('bem_vindo_central') }} <span data-customer="name"></span>,
            <a href="{{ links.logout }}">{{ Translation('sair') }}</a></li>
          </span>
          <span class="tray-hide" data-logged-user="false">
            {{ Translation('bem_vindo_central') }}, <a href="{{ links.login }}" data-tray-tst="login" class="{{ utils.is_https ? 'modal-login' }}">{{ Translation('login') }}</a> {{ Translation('ou') }} <a href="{{ links.register }}" data-tray-tst="cadastro">{{ Translation('cadastre_se') }}</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

Javascript

Como usar

Copie o código HTML e crie um arquivo separado, ex: elements/snippets/topo_flutuante.html

Faça a chamada desse arquivo onde desejar:

{% element('snippets/topo_flutuante') %}

Insira o bloco de código CSS em sua folha de estilo

Insira o bloco de código Javascript em seu arquivo .js