Menus tradicionais não atendem mais ao mundo responsivo e quando se trata de WordPress é sempre bom um artigo editável para que possamos relembrar como se faz um bom e responsivo Menu Off Canvas ou como mais é conhecido Menu Hamburguer!
A ideia é que esse artigo seja editado toda vez que uma versão melhor de como se cria um menu off canvas for descoberta e é claro para issso contamos com a colaboração de todos.
Como ativar
Atualmente (12/03/2026) estou usando o tema Astra e ele já possui menu responsivo nativo. Vamos partir do presuposto que já exista um menu principal criado e que ele tem o nome de “principal”. O caminho mais simples para ativar é no painel do wordpress, vá em: Aparência – Personalizar
1 – Entre em: Header Builder (Construtor de Cabeçalho).
2 – Procure pela seção: Primary Menu (Menu principal).
3 – Veja a configuração de Responsive / Mobile
No modo Mobile, o Astra automaticamente transforma o menu em
“Hamburger”.
Normalmente você verá algo como:
– Toggle Button
– Hamburger Menu
– Off Canvas
Selecione Off Canvas se Quiser o menu deslizando da lateral
Como testar
Dentro do personalizador – Na parte inferior da tela existem três ícones:
– Desktop
– Tablet
– Mobile
Clique em Mobile e você verá o botãoaparecer.
Importante
O Astra cria o menu hamburger automaticamente quando:
a) existe menu criado
b) ele está atribuído ao Primary Menu