[SOLUCIONADO] Adicionar logo menor no topo após a primeira rolagem

Caros, alguém pode me informar como adicionar o logo menor que aparece quando rolamos a página?

Obrigado desde já!

http://lojamaldita.com.br

2 Curtidas

@Rogs essa alteração que quer fazer seria para substituir o nome do site que aparece na #barratopo pela sua logo?

1 Curtida

@Rubens é isso mesmo, queria usar um logo horizontal ali

1 Curtida

Tenho arquivado alguns códigos que utilizei na loja enquanto fazia alguns testes. O código que necessita eu tenho também, mas não vou lhe garantir que logre êxito instalando o mesmo, pois não lembro se ele funcionou (kkkk). O código é dividido em duas partes (HTML e o CSS). Fiz algumas alterações nele já deixando o nome da sua loja e tbm deixei em letra maiúscula os dados que você precisará inserir.

Nunca coloquei códigos em minhas postagens aqui, vamos ver como que isso vai ficar. Segue:

HTML

<div id="barraTopo" class="hidden-phone" style="display: block;">
  <div class="conteiner">
    <div class="row-fluid">
      <div class="span3 hidden-phone">
        <h4 class="titulo">
          <a href="http://www.lojamaldita.com.br/" title="Loja Maldita" class="cor-secundaria"><img src="ENDEREÇO DA SUA IMAGEM - LARGURA:100 ALTURA:31" alt="NOME DO ARQUIVO"></a>
        </h4>
      </div>
      <div class="span3 hidden-phone">
        <div class="canais-contato">
          <ul>
            <li><a href="#modalContato" data-toggle="modal" data-target="#modalContato">
              <i class="icon-comment"></i>Fale Conosco</a>
            </li>
            
              <li>
                <a href="#modalContato" data-toggle="modal" data-target="#modalContato">
                  <i class="icon-phone"></i>Tel: (11) 97132-2054
                </a>
              </li>
            
          </ul>
        </div>
      </div>
      <div class="span6">
        <div class="row-fluid">
          <div class="busca borda-alpha span6">
            <form action="/buscar" method="get">
              <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="text" name="q" placeholder="Digite o que você procura" class="ui-autocomplete-input" autocomplete="off" vk_16cdd="subscribed">
              <button class="botao botao-busca botao-input icon-search fundo-secundario"></button>
            </form>
          </div>
          
            <div class="span6 hidden-phone">
              
<div class="carrinho vazio">
  
    <a href="http://www.lojamaldita.com.br/carrinho/index">
      <i class="icon-shopping-cart fundo-principal"></i>
      <strong class="qtd-carrinho titulo cor-secundaria" style="display: none;">0</strong>
      <span style="display: none;">
        
          <b class="titulo cor-secundaria"><span>Produtos no carrinho</span></b>
        
      </span>
      
        <span class="titulo cor-secundaria vazio-text">Carrinho vazio</span>
      
    </a>
  

  <div class="carrinho-interno-ajax">
    

  <div class="carrinho-interno borda-principal">
    <ul>
      
    </ul>
    <div class="carrinho-rodape">
      <span class="carrinho-info">
        
          <i>0 produtos no carrinho</i>
        
        
          
            <span class="carrino-total">
              Total: <strong class="titulo cor-principal">0,00</strong>
            </span>
          
        
      </span>
      <a href="http://www.lojamaldita.com.br/carrinho/index" class="botao principal">
        
          <i class="icon-shopping-cart"></i>Ir para o carrinho
        
      </a>
    </div>
  </div>


  </div>

</div>

            </div>
          
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#barraTopo h4 img {
    width: auto;
    height: auto;
    max-height: 35px;
    margin: 10px 0 0 70px;
}

Abço!

Pessoal, achei esse vídeo super simples que funciona muito bem!

5 Curtidas

@Rogs como você colocou uma logo diferente da sua na barra superior?!
No vídeo só ensina a usar a mesma logo, queria colocar uma variação da minha logo que se adequaria melhor naquele formato horizontal, igual a sua.

1 Curtida

@Mundoadesivo basta você hospedar a nova imagem no seu site, através da opção “Upload de arquivos” dentro do seu painel admin, e posteriormente pegar o endereço do link desta nova imagem e colocar no lugar do link da imagem antiga, que está no código já implantado.

1 Curtida

@Mundoadesivo, tive que modificar um pouco o código que está no vídeo. Faça como o @Rubens indicou.
O código que fiz está assim:

`

#barraTopo h4 { background-image: url(https://cdn.awsli.com.br/288/288132/arquivos/malditinha.png); background-position:center; background-repeat:no-repeat; margin-top: 1px; } #barraTopo h4 img { visibility:hidden; width: auto; height: auto; max-height: 35px; } `
2 Curtidas

Valeu galera! consegui! muito obrigado!!

http://www.mundoadesivo.com.br/

2 Curtidas

olá!!! fiz conforme o vídeo e deu certo! muito feliz! muito obrigada pela dica. agora, queria saber, como faço para mudar a cor da caixa da lupa e do carrinho. Elas estão pretas e gostaria que fosse o mesmo azul da nossa identidade visual #0f3e5f . Seria em html ou css para mudar esta cor?
Muito obrigada!!!

Olá, pessoal, meu problema é exatamente o contrário:
Sou novo na loja e quando desço a barra de rolagem o Logo aparece gigante. Gostaria de deixar só com o nome em cima, sem o logo.
Alguém sabe?
Obrigado!