O cabeçalho retrátil é uma versão menor do cabeçalho do site, permitindo manter informações importantes de navegação fixas, sem distrair os usuários enquanto rolam a página e sem ocupar muito espaço. Ele funciona como um cabeçalho fixo, mas condensa o tamanho dos logotipos e outros no cabeçalho. É particularmente útil em sites com cabeçalhos grandes e sites projetados para rolagem longa.
Observação:
O cabeçalho retrátil está disponível na versão para desktop e somente na versão para tablet quando o layout de cabeçalho com barra superior é utilizado.
Assim que o usuário ultrapassa a altura do cabeçalho, o cabeçalho diminui de tamanho.
- Se houver um visível em uma coluna, o estará centralizado verticalmente dentro da coluna e o preenchimento e as margens superior e inferior estarão definidos como 0.
- Se as colunas tiverem mais de um visível, os não estarão alinhados verticalmente e o preenchimento e as margens superior e inferior estarão definidos como 10px.
- Se houver linhas vazias com colunas, as colunas ocuparão todo o espaço da linha.
- Para lidar com modelos que possuem um valor mínimo de altura no cabeçalho, a altura mínima do cabeçalho é definida como automática.
Para editar o design de um cabeçalho que encolhe:
- Passe o cursor sobre o cabeçalho e clique em Cabeçalho e, em seguida, clique em Editar design.
- Na guia Cabeçalho Reduzido, clique em Ativar cabeçalho recolhível. Você tem as seguintes opções:
- Exibir apenas a linha de navegação. Exibe somente a linha com a navegação quando o cabeçalho diminui de tamanho. Este recurso só se aplica se houver mais de uma linha no cabeçalho.
- Cor de fundo. Altere a cor de fundo do cabeçalho recolhível. Observe que a cor de fundo da linha substitui a cor de fundo do cabeçalho recolhível.
- Mais opções de cores para o cabeçalho ao rolar a página. Especifique cores para o texto, link selecionado e efeito de foco, ícones, texto do botão e muito mais.
- Tamanho do logotipo. Altera o tamanho para o qual o logotipo ou a imagem são reduzidos quando o cabeçalho diminui (o padrão é 66%).
- Alterar logotipo ao rolar a página. Selecione um logotipo para exibir ao rolar a página.
- Espaçamento do cabeçalho. Ajuste o espaçamento superior e inferior do cabeçalho recolhível. Você pode alterar o espaçamento do cabeçalho para cada dispositivo.
Quando o cabeçalho recolhível está ativado:
- A página rola para baixo para exibir o logotipo e os efeitos do cabeçalho que diminuem de tamanho.
- O recurso de cabeçalho fixo é aplicado automaticamente ao cabeçalho.
- O espaçamento do cabeçalho altera a parte superior/inferior acolchoamento e margem para 0.
Observação:
Isso muda o acolchoamento e margem do cabeçalho, e não das linhas dentro do cabeçalho.
- As imagens no cabeçalho são redimensionadas para a porcentagem indicada na barra de tamanho do logotipo (o padrão é 66%).
- Alterar o cabeçalho layout não altera as configurações de redução do cabeçalho.
- Nem todos são compatíveis e aparecem no cabeçalho que se reduz. Os seguintes são compatíveis. exibidos em um cabeçalho que diminui de tamanho:
- Navegação
- Widget multilíngue
- Ícones sociais
- Botão "Ligar"
- Botão OpenTable
- Botão "Enviar e-mail"
- vCita
- Botão do PayPal
- Botão "Curtir" do Facebook
- Imagens e logotipos
- Carrinho da Loja
- Widgets de parágrafo
- Widgets de título
- Botões
Observação:
- Você não pode editar quando o cabeçalho é recolhido.
- As propriedades de design substituem as propriedades de retração do cabeçalho. Por exemplo, se você definir uma cor de fundo para a linha no cabeçalho, essa cor de fundo será exibida sobre a cor de fundo do cabeçalho retraído.
- Se você tiver um no cabeçalho que não é compatível com o cabeçalho recolhível, uma coluna vazia aparece no lugar do .
- As linhas vazias são exibidas no cabeçalho que diminui de tamanho.
- Se você não consegue ver o cabeçalho encolhendo, pode ser porque seu site não tem linhas suficientes para que a página role para baixo e acione o efeito de encolhimento. Se houver apenas uma linha na página, a rolagem não funcionará.