No design de interfaces moderno, a experiência do usuário (UX) mobile dita o sucesso de uma estratégia de crescimento. Se o seu menu mobile ainda é uma barra estática no topo que obstrui a leitura, você está perdendo conversão.

Neste tutorial, vamos construir o “Smart Floating Menu”: um cabeçalho que desaparece ao rolar para baixo e ressurge como uma pílula flutuante no rodapé apenas quando o usuário faz o scroll-up.

Por que usar um Menu Sticky no Bottom?

  • Alcance do Polegar (Thumb Zone): Facilita a navegação em telas grandes.

  • Leitura Imersiva: Libera 100% da tela durante o consumo de conteúdo.

  • Estética Apple: Traz o visual “App-Like” para sites WordPress.

Passo 1: Estrutura no Elementor

Para que este tutorial funcione em qualquer tema, não usaremos o cabeçalho padrão do seu template. Vamos criar um Container personalizado.

  1. Abra o Elementor Theme Builder e crie um novo Header (ou edite o existente).

  2. Crie um Container principal para o seu Menu Mobile.

  3. No painel lateral, vá em Avançado > Classes CSS e adicione: menumobile.

  4. Dentro deste container, posicione seu Logo e o ícone de menu (hamburguer). Configure o container como Flexbox (Horizontal) e Justificar Conteúdo: Espaço entre (Space-between).

Passo 2: O CSS de Engenharia (Agnóstico)

Este código controla a transição de estados. Ele foi desenhado para ignorar barreiras de temas e focar apenas no comportamento da classe .menumobile.

Copie e cole em Aparência > Personalizar > CSS Adicional:

/* SMART MOBILE MENU – METODOLOGIA BUZZ61
Este código cria o efeito de pílula flutuante e transparência.
*/
@media (max-width: 1024px) {

/* 1. ESTADO INICIAL (TOPO) */
.menumobile:not(.is-sticky-bottom) {
width: 100% !important;
max-width: 100vw !important;
left: 0 !important;
padding: 24px !important;
box-sizing: border-box !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
position: relative !important;
background-color: transparent !important;
transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease !important;
z-index: 9998;
}

/* 2. ESCONDER PARA CIMA NO SCROLL DOWN */
.menumobile.is-hidden-top {
transform: translateY(-120%) !important;
opacity: 0 !important;
pointer-events: none;
}

/* 3. ESTADO STICKY BOTTOM (SCROLL UP) */
.menumobile.is-sticky-bottom {
position: fixed !important;
top: auto !important;
bottom: 15px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 90% !important;
max-width: 380px !important;
padding: 10px 20px !important;
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 50px;
opacity: var(–scroll-p) !important;
pointer-events: auto;
z-index: 9999;

/* Efeito Dinâmico de Escala e Subida */
transform:
translateX(-50%)
translateY(calc(80px * (1 – var(–scroll-p))))
scale(calc(0.8 + (0.2 * var(–scroll-p)))) !important;

box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* LIMPEZA DE TEMA */
.menumobile::before { content: none !important; display: none !important; }
}

Passo 3: A Lógica de Movimento (JavaScript)

Para que o menu “responda” à velocidade do seu dedo, usaremos uma variável dinâmica que monitora a direção do scroll.

Insira este código em um widget HTML (no rodapé) ou via Elementor > Custom Code:

<script>
/**
* Smart Mobile Menu Logic – Buzz61
* Monitora a direção do scroll e aplica os estados de visibilidade.
*/
document.addEventListener(‘DOMContentLoaded’, function() {
const header = document.querySelector(‘.menumobile’);
if (!header) return;

let lastScrollY = window.scrollY;
let upScrollAccumulator = 0;
const threshold = 120; // Sensibilidade para o menu aparecer 100%

const handleSmartScroll = () => {
const currentScrollY = window.scrollY;
const delta = lastScrollY – currentScrollY; // Positivo = Scroll Up

if (currentScrollY < 50) {
// No topo da página
header.classList.remove(‘is-sticky-bottom’, ‘is-hidden-top’);
header.style.setProperty(‘–scroll-p’, 0);
upScrollAccumulator = 0;
}
else if (delta < 0) {
// Descendo a página (Scroll Down)
header.classList.add(‘is-hidden-top’);
header.classList.remove(‘is-sticky-bottom’);
upScrollAccumulator = 0;
}
else {
// Subindo a página (Scroll Up)
header.classList.remove(‘is-hidden-top’);
header.classList.add(‘is-sticky-bottom’);
upScrollAccumulator = Math.min(upScrollAccumulator + delta, threshold);
header.style.setProperty(‘–scroll-p’, upScrollAccumulator / threshold);
}

lastScrollY = currentScrollY;
};

// Executa a lógica a cada movimento de scroll com performance otimizada
window.addEventListener(‘scroll’, () => {
window.requestAnimationFrame(handleSmartScroll);
}, { passive: true });
});
</script>

Otimização SEO: Palavras-Chave e Termos de Busca

Para que este artigo ranqueie no Google e YouTube, focamos nos termos técnicos mais buscados:

  • Elementor Mobile Menu Sticky Bottom

  • iOS Style Floating Header WordPress

  • Menu que aparece no Scroll Up Elementor

  • Custom CSS Mobile Navigation Tutorial

  • Design de Menu Pílula (Pill Menu) Mobile

Conclusão

Ao implementar esse sistema, você não está apenas mudando um código; está elevando a engenharia de marketing do seu site. O menu deixa de ser um obstáculo e passa a ser uma ferramenta de suporte ao crescimento.

Gostou dessa solução? Conheça a metodologia Growth 61X da Buzz61 e transforme seu site em uma máquina de escala.

Dicas para o Post:

  1. Imagens/Prints: Tire prints do menu no topo (centralizado) e dele como pílula no rodapé.

  2. Vídeo: Se puder, grave um pequeno vídeo da tela do celular mostrando a fluidez da animação. No YouTube, use o título: “Como fazer o Menu do iPhone no Elementor (Passo a Passo)”.

  3. Meta-Description: “Aprenda a criar um menu mobile avançado no Elementor que aparece no scroll up com animação estilo iOS. Tutorial passo a passo com CSS e JS agnóstico.”

O que achou dessa estrutura de artigo? Ela comunica bem o valor técnico que acabamos de criar.