{"id":72187,"date":"2024-12-20T07:00:00","date_gmt":"2024-12-20T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=72187"},"modified":"2025-05-26T12:21:27","modified_gmt":"2025-05-26T19:21:27","slug":"3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/","title":{"rendered":"3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress"},"content":{"rendered":"\n<p>A navega\u00e7\u00e3o do seu site pode estar escapando&#8230; Ent\u00e3o <em>fique<\/em> por aqui para aprender como mant\u00ea-la fixa!<\/p>\n\n\n<p>OK, deixando as piadas ruins de lado, manter a navega\u00e7\u00e3o do seu site facilmente acess\u00edvel \u00e9 essencial para melhorar a experi\u00eancia do usu\u00e1rio. <strong>Conhe\u00e7a a barra de navega\u00e7\u00e3o fixa, uma barra de navega\u00e7\u00e3o fixa que permanece vis\u00edvel \u00e0 medida que os usu\u00e1rios rolam a p\u00e1gina para baixo.<\/strong><\/p>\n\n\n<p>Este recurso pr\u00e1tico mant\u00e9m itens de menu e chamadas para a\u00e7\u00e3o acess\u00edveis, n\u00e3o importa o quanto os usu\u00e1rios rolem a p\u00e1gina \u2014 um divisor de \u00e1guas para propriet\u00e1rios de pequenas empresas que desejam aumentar o engajamento e <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/increase-website-conversion-rate\/\" rel=\"noopener\">convers\u00f5es<\/a>.<\/p>\n\n\n<p>Neste tutorial, vamos explorar tr\u00eas maneiras simples de criar um cabe\u00e7alho fixo no WordPress, adequadas para todos os n\u00edveis de habilidade \u2014 desde iniciantes at\u00e9 aqueles confort\u00e1veis com um pouco de programa\u00e7\u00e3o. Seja preferindo o uso de um plugin, aproveitando as configura\u00e7\u00f5es integradas do seu tema, ou adicionando CSS personalizado, n\u00f3s te ajudamos.<\/p>\n\n\n<h2 id=\"h-why-sticky-headers-take-your-website-up-a-notch\" class=\"wp-block-heading\">Por Que Cabe\u00e7alhos Fixos Elevam Seu Site a Um Novo N\u00edvel<\/h2>\n\n\n<p>Antes de entrarmos no como fazer, vamos ver por que voc\u00ea pode querer usar um cabe\u00e7alho fixo em primeiro lugar.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1500\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers.webp\" alt=\"Quatro exemplos visuais mostrando um cabe\u00e7alho fixo com benef\u00edcios: um cursor mostrando capacidade de navega\u00e7\u00e3o, aumento na UX, foco no bot\u00e3o &quot;reservar agora&quot; e um logotipo ampliado para consist\u00eancia da marca. \" class=\"wp-image-60697 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-300x281.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-1024x960.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-768x720.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-1536x1440.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-600x563.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-1200x1125.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-730x684.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-1460x1369.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-784x735.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-1568x1470.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_benefits_of_using_sticky_headers-877x822.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1500;\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\">1. Navegabilidade Aprimorada<\/h3>\n\n\n<p>Um cabe\u00e7alho fixo mant\u00e9m o menu principal do seu site sempre vis\u00edvel, eliminando a necessidade de os visitantes rolarem a p\u00e1gina at\u00e9 o topo quando desejam acessar uma p\u00e1gina diferente. Essa facilidade de movimenta\u00e7\u00e3o pode tornar a navega\u00e7\u00e3o no seu site mais intuitiva e prazerosa, especialmente se voc\u00ea tiver p\u00e1ginas ricas em conte\u00fado que exigem muita rolagem.<\/p>\n\n\n<h3 class=\"wp-block-heading\">2. Melhor Experi\u00eancia do Usu\u00e1rio<\/h3>\n\n\n<p>Ao manter informa\u00e7\u00f5es essenciais e links de navega\u00e7\u00e3o facilmente acess\u00edveis, voc\u00ea reduz o atrito na jornada do usu\u00e1rio. Esse tipo de experi\u00eancia de navega\u00e7\u00e3o cont\u00ednua pode levar a visitas mais longas ao site e uma menor taxa de rejei\u00e7\u00e3o, sinalizando para os motores de busca que seu <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/how-to-come-up-with-new-content-ideas\/\" rel=\"noopener\">conte\u00fado<\/a> \u00e9 valioso e envolvente.<\/p>\n\n\n<h3 class=\"wp-block-heading\">3. Aumento De Convers\u00f5es<\/h3>\n\n\n<p>Imagine ter um bot\u00e3o persistente &#8220;Reservar Agora&#8221; ou &#8220;Contate-nos&#8221; que acompanha seus visitantes onde quer que eles v\u00e3o em seu site. Um cabe\u00e7alho fixo permite que voc\u00ea mantenha<a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/call-to-action-examples\/\" rel=\"noopener\"> chamadas para a\u00e7\u00e3o <\/a>em destaque constante, incentivando gentilmente os usu\u00e1rios a dar o pr\u00f3ximo passo \u2014 seja realizar uma compra, inscrever-se para um boletim informativo ou reservar um servi\u00e7o.<\/p>\n\n\n<h3 class=\"wp-block-heading\">4. Consist\u00eancia da Marca<\/h3>\n\n\n<p>Um cabe\u00e7alho fixo mant\u00e9m seu logotipo e outros elementos da marca vis\u00edveis em todos os momentos. Esse refor\u00e7o constante pode fortalecer o reconhecimento e a confian\u00e7a da marca, tornando seu neg\u00f3cio mais memor\u00e1vel para os clientes em potencial.<\/p>\n\n\n<h2 id=\"h2_3-simple-ways-to-create-a-fixed-sticky-header-in-wordpress\" class=\"wp-block-heading\">3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress<\/h2>\n\n\n<p>Agora que sabemos <em>por que<\/em> voc\u00ea deseja um cabe\u00e7alho fixo para o seu site WordPress, vamos falar sobre <em>como<\/em> obter um.<\/p>\n\n\n<p>Abaixo, vamos guiar voc\u00ea por tr\u00eas m\u00e9todos para adicionar um cabe\u00e7alho fixo ao seu site WordPress, come\u00e7ando pelo mais f\u00e1cil e avan\u00e7ando para t\u00e9cnicas mais avan\u00e7adas.<\/p>\n\n\n<p><strong>Escolha sua pr\u00f3pria aventura: aquela que melhor se adapta ao seu n\u00edvel de conforto e \u00e0s necessidades do seu site.<\/strong><\/p>\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo 1: Usando Um Plugin WordPress (F\u00e1cil)<\/h3>\n\n\n<p>Para aqueles que preferem uma solu\u00e7\u00e3o sem c\u00f3digo, <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/best-wordpress-plugins\/\" rel=\"noopener\">Plugins WordPress<\/a> oferecem uma maneira r\u00e1pida e amig\u00e1vel de adicionar um cabe\u00e7alho fixo. Os Plugins s\u00e3o especialmente ben\u00e9ficos se voc\u00ea \u00e9 novo no WordPress ou quer implementar a funcionalidade sem se aprofundar em detalhes t\u00e9cnicos.<\/p>\n\n\n<h4 class=\"wp-block-heading\">Plugins Recomendados<\/h4>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/mystickymenu\/\" rel=\"noopener\"><strong>Minha Barra Adesiva<\/strong><\/a><\/p>\n\n\n<p>Funcionalidades:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Processo de configura\u00e7\u00e3o simples.<\/li>\n\n\n\n<li>Apar\u00eancia e comportamento personaliz\u00e1veis.<\/li>\n\n\n\n<li>Op\u00e7\u00e3o para tornar qualquer elemento fixo, n\u00e3o apenas o cabe\u00e7alho.<\/li>\n\n\n<\/ul>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/sticky-menu-or-anything-on-scroll\/\" rel=\"noopener\"><strong>Menu Fixo<\/strong><\/a><strong> (ou Qualquer Coisa!) ao Rolar<\/strong><\/p>\n\n\n<p>Funcionalidades:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Flexibilidade para fixar qualquer elemento.<\/li>\n\n\n\n<li>Op\u00e7\u00f5es de deslocamento para controlar quando o efeito fixo come\u00e7a.<\/li>\n\n\n\n<li>Compatibilidade com a maioria dos temas.<\/li>\n\n\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\">O Que Fazer<\/h4>\n\n\n<p><strong>Passo 1: Instale o Plugin<\/strong><\/p>\n\n\n<p>Entre no seu painel de controle do WordPress. Navegue at\u00e9 <strong>Plugins <\/strong>&gt;<strong> Adicionar Novo Plugin<\/strong>. Na barra de pesquisa, digite o nome do plugin escolhido, instale-o e ative-o.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1162\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin.webp\" alt=\"captura de tela ampliada do plugin &quot;My Sticky Menu&quot; mostrando o termo de busca &quot;my sticky bar&quot; e o resultado subsequente apontando para o bot\u00e3o &quot;instalar agora&quot;\" class=\"wp-image-60690 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-300x218.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-1024x744.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-768x558.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-1536x1116.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-600x436.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-1200x872.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-730x530.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-1460x1060.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-784x569.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-1568x1139.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/02_install_the_plugin-877x637.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1162;\" \/><\/figure>\n\n\n<p><strong>Passo 2: Configure o plugin (se necess\u00e1rio)<\/strong><\/p>\n\n\n<p>Identifique o elemento de cabe\u00e7alho que deseja tornar fixo. Use a ferramenta <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/how-to-inspect-a-website\/\" rel=\"noopener\">&#8220;Inspecionar Elemento&#8221; do seu navegador<\/a> para encontrar o seletor exato, se necess\u00e1rio. Insira o seletor nas configura\u00e7\u00f5es do plugin.<\/p>\n\n\n<p>Para fazer isso, abra seu site em um navegador, <strong>clique com o bot\u00e3o direito<\/strong> no seu cabe\u00e7alho e selecione <strong>Inspecionar<\/strong> ou <strong>Examinar Elemento<\/strong>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"999\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect.webp\" alt=\"inspecionar elemento na p\u00e1gina inicial do dreamhost\" class=\"wp-image-60694 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-300x187.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-1024x639.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-768x480.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-1536x959.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-600x375.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-1200x749.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-730x456.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-1460x912.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-784x490.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-1568x979.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/05_inspect-877x548.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/999;\" \/><\/figure>\n\n\n<p>Seletores comuns incluem <strong>#site-header<\/strong> ou <strong>.main-header<\/strong>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"757\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class.webp\" alt=\"inspe\u00e7\u00e3o de elemento da dreamhost\" class=\"wp-image-60695 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-300x142.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-1024x484.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-768x363.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-1536x727.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-600x284.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-1200x568.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-730x345.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-1460x691.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-784x371.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-1568x742.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/06_div_class-877x415.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/757;\" \/><\/figure>\n\n\n<p><strong>Nota<\/strong>: Para aprender mais sobre como usar as ferramentas de desenvolvedor do seu navegador, por favor leia nosso guia em <a target=\"_blank\" href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/360031248971-Viewing-your-website-s-headers\" rel=\"noopener\"><em>Visualizando os cabe\u00e7alhos do seu site<\/em><\/a>.<\/p>\n\n\n<p>Dependendo do plugin que escolheste, poder\u00e1s personalizar outras op\u00e7\u00f5es, como <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" rel=\"noopener\">adicionar efeitos de anima\u00e7\u00e3o<\/a> ou alterar a dist\u00e2ncia de rolagem antes de o cabe\u00e7alho tornar-se fixo.<\/p>\n\n\n<p><strong>Passo 3: Salve as altera\u00e7\u00f5es e teste<\/strong><\/p>\n\n\n<p>Clique em <strong>Salvar<\/strong> ou <strong>Aplicar<\/strong> para confirmar suas configura\u00e7\u00f5es. Visite seu site para testar o cabe\u00e7alho fixo. Role para baixo para ver se o cabe\u00e7alho permanece fixo no topo e n\u00e3o se esque\u00e7a de verificar em diferentes dispositivos.<\/p>\n\n\n<h3 class=\"wp-block-heading\">M\u00e9todo 2: Usando as Configura\u00e7\u00f5es Integradas do Seu Tema (Moderado)<\/h3>\n\n\n<p>Muitos <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/how-to-pick-wordpress-theme\/\" rel=\"noopener\">temas modernos de WordPress<\/a> v\u00eam com op\u00e7\u00f5es integradas para habilitar um cabe\u00e7alho fixo. Este m\u00e9todo oferece uma integra\u00e7\u00e3o perfeita com o design do seu site e evita a necessidade de plugins adicionais.<\/p>\n\n\n<h4 class=\"wp-block-heading\">Temas Populares Com Op\u00e7\u00f5es de Cabe\u00e7alho Fixo<\/h4>\n\n\n<ul class=\"wp-block-list\">\n<li><a target=\"_blank\" href=\"https:\/\/wpastra.com\/pricing\/?campaign=DHblog&amp;bsf=10463\" rel=\"noopener\">Astra<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/oceanwp.org\/\" rel=\"noopener\">OceanWP<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" rel=\"noopener\">Divi<\/a><\/li>\n\n\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\">O Que Fazer<\/h4>\n\n\n<p><strong>Passo 1: Acesse o personalizador de temas<\/strong><\/p>\n\n\n<p>No teu painel do WordPress, navega at\u00e9 <strong>Appearance<\/strong> &gt; <strong>Customize<\/strong>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"641\" height=\"720\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/03_install_the_plugin.webp\" alt=\"captura de tela ampliada da navega\u00e7\u00e3o do WP destacando o bot\u00e3o &quot;personalizar&quot; abaixo de &quot;temas&quot; em &quot;apar\u00eancia&quot;\" class=\"wp-image-60691 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/03_install_the_plugin.webp 641w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/03_install_the_plugin-267x300.webp 267w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/03_install_the_plugin-600x674.webp 600w\" data-sizes=\"(max-width: 641px) 100vw, 641px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 641px; --smush-placeholder-aspect-ratio: 641\/720;\" \/><\/figure>\n\n\n<p><strong>Passo 2: Encontre as configura\u00e7\u00f5es do seu cabe\u00e7alho<\/strong><\/p>\n\n\n<p>Na barra lateral do personalizador, procure por se\u00e7\u00f5es com as etiquetas \u201cCabe\u00e7alho\u201d, \u201cMenu\u201d ou \u201cNavega\u00e7\u00e3o\u201d. Clique na se\u00e7\u00e3o relevante para acessar as configura\u00e7\u00f5es do cabe\u00e7alho.<\/p>\n\n\n<p><strong>Passo 3: Ative a op\u00e7\u00e3o de cabe\u00e7alho fixo<\/strong><\/p>\n\n\n<p>Encontre a configura\u00e7\u00e3o marcada como \u201cCabe\u00e7alho Fixo,\u201d \u201cCabe\u00e7alho Fixo,\u201d ou \u201cAtivar ao Rolar.\u201d Alterne a op\u00e7\u00e3o para <strong>Ligado<\/strong> ou <strong>Ativar<\/strong>.<\/p>\n\n\n<p><strong>Etapa 4: Personalize Outras Configura\u00e7\u00f5es (Se Aplic\u00e1vel)<\/strong><\/p>\n\n\n<p>Pode haver outras configura\u00e7\u00f5es que voc\u00ea pode personalizar, se desejar, como a <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/website-color-schemes\/\" rel=\"noopener\">cor de fundo<\/a>, n\u00edveis de transpar\u00eancia, tamanho do logo durante a rolagem, etc. Use a pr\u00e9-visualiza\u00e7\u00e3o ao vivo para ver suas altera\u00e7\u00f5es em tempo real.<\/p>\n\n\n<p><strong>Etapa 5: Publicar e testar<\/strong><\/p>\n\n\n<p>Clique <strong>Publicar<\/strong> para salvar suas altera\u00e7\u00f5es. Visite seu site para verificar a funcionalidade do cabe\u00e7alho fixo. Teste em v\u00e1rias p\u00e1ginas e certifique-se de verificar sua <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/how-to-optimize-your-site-for-mobile\/\" rel=\"noopener\">responsividade em tablets e smartphones<\/a>.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h3 class=\"wp-block-heading\">M\u00e9todo 3: Fa\u00e7a Voc\u00ea Mesmo com CSS Personalizado (Avan\u00e7ado)<\/h3>\n\n\n<p>Se voc\u00ea se sente confort\u00e1vel com um pouco de programa\u00e7\u00e3o, adicionar <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\" rel=\"noopener\">CSS<\/a> personalizado permite o m\u00e1ximo de personaliza\u00e7\u00e3o e controle sobre o comportamento e a apar\u00eancia do seu cabe\u00e7alho fixo.<\/p>\n\n\n<p>Novamente, voc\u00ea precisar\u00e1 identificar seu elemento de cabe\u00e7alho. Abra seu site em um navegador, clique com o bot\u00e3o direito no cabe\u00e7alho e selecione <strong>Inspeccionar<\/strong> ou <strong>Inspeccionar Elemento<\/strong>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"999\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header.webp\" alt=\"inspecionar elemento\" class=\"wp-image-60696 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-300x187.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-1024x639.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-768x480.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-1536x959.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-600x375.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-1200x749.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-730x456.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-1460x912.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-784x490.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-1568x979.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/07_inspect_header-877x548.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/999;\" \/><\/figure>\n\n\n<p>Observe o seletor CSS para o seu cabe\u00e7alho. Seletores comuns incluem <strong>header<\/strong>, <strong>#masthead<\/strong> e <strong>.site-header<\/strong>, ent\u00e3o procure por esses.<\/p>\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tHow to Learn CSS In 2026 (Fast &amp; Free)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/learn-css\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n<h4 class=\"wp-block-heading\">O Que Fazer<\/h4>\n\n\n<p><strong>Passo 1: V\u00e1 ao seu editor de CSS adicional<\/strong><\/p>\n\n\n<p>V\u00e1 at\u00e9 <strong>Apar\u00eancia <\/strong>&gt;<strong> Personalizar<\/strong> no seu Painel de controle do WordPress. Clique em <strong>CSS Adicional<\/strong> na parte inferior da barra lateral do personalizador.<\/p>\n\n\n<p><strong>Passo 2: Insira o c\u00f3digo CSS personalizado<\/strong><\/p>\n\n\n<p>Insira c\u00f3digo personalizado no editor de CSS. Substitua <strong>header<\/strong> pelo seu seletor de cabe\u00e7alho espec\u00edfico se for diferente (por exemplo, <strong>.site-header<\/strong>).<\/p>\n\n\n<p>Aqui est\u00e1 um exemplo de c\u00f3digo para cabe\u00e7alho fixo que voc\u00ea pode usar:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>\/* Tornar o cabe\u00e7alho fixo *\/\nheader {\n    position: fixed;\n    top: 0;\n    width: 100%;\n    z-index: 9999;\n}\n\n\/* Impedir que o conte\u00fado fique escondido atr\u00e1s do cabe\u00e7alho *\/\nbody {\n    margin-top: 80px; \/* Ajuste este valor para corresponder \u00e0 altura do seu cabe\u00e7alho *\/\n}<\/code><\/pre>\n\n\n<p><strong>Passo 3: Ajuste a margem<\/strong><\/p>\n\n\n<p>Modifique o valor de <strong>margin-top<\/strong> na regra de <strong>body<\/strong> para corresponder \u00e0 altura exata do seu cabe\u00e7alho. Por exemplo, se o seu cabe\u00e7alho tem 100 pixels de altura, defina <strong>margin-top: 100px;<\/strong>.<\/p>\n\n\n<p><strong>Passo 4: Publicar e Testar<\/strong><\/p>\n\n\n<p>Clique <strong>Publicar<\/strong> para aplicar suas altera\u00e7\u00f5es. Visite seu site para garantir que seu cabe\u00e7alho permane\u00e7a fixo no topo ao rolar e que n\u00e3o haja sobreposi\u00e7\u00e3o entre o cabe\u00e7alho e o conte\u00fado abaixo. Teste em diferentes dispositivos e navegadores para garantir que est\u00e1 consistente tamb\u00e9m.<\/p>\n\n\n<h4 class=\"wp-block-heading\">Dicas de Solu\u00e7\u00e3o de Problemas<\/h4>\n\n\n<p><strong>1. Conte\u00fado Sobreposto<\/strong><\/p>\n\n\n<p>Se o conte\u00fado abaixo do cabe\u00e7alho estiver oculto, ajuste o valor de <strong>margin-top<\/strong>.<\/p>\n\n\n<p><strong>2. Responsividade M\u00f3vel<\/strong><\/p>\n\n\n<p>Se o seu cabe\u00e7alho fixo ocupa muito espa\u00e7o no celular, voc\u00ea pode revert\u00ea-lo para um cabe\u00e7alho normal, n\u00e3o fixo, para telas abaixo de uma certa largura. Por exemplo, se voc\u00ea deseja desativar o cabe\u00e7alho fixo em dispositivos com menos de 600 pixels de largura, voc\u00ea poderia adicionar:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@media (max-width: 600px) {\n    header {\n        position: static; \/* Remove o posicionamento fixo (adesivo) *\/\n        margin-top: 0;    \/* Ajusta o layout de volta ao normal *\/\n    }\n    body {\n        margin-top: 0;    \/* Remove a margem superior que estava compensando pelo cabe\u00e7alho adesivo *\/\n    }\n}<\/code><\/pre>\n\n\n<p><strong>3. Problemas de Z-index<\/strong><\/p>\n\n\n<p>Aumente o valor do <strong>z-index<\/strong> se o cabe\u00e7alho estiver aparecendo atr\u00e1s de outros elementos.<\/p>\n\n\n<h2 id=\"h2_should-you-add-a-sticky-header-the-ongoing-debate\" class=\"wp-block-heading\">Voc\u00ea Deve Adicionar um Cabe\u00e7alho Fixo? O Debate Continua<\/h2>\n\n\n<p>Enquanto cabe\u00e7alhos fixos podem melhorar a experi\u00eancia do usu\u00e1rio, as opini\u00f5es variam entre designers de web e usu\u00e1rios. Uma <a target=\"_blank\" href=\"https:\/\/www.reddit.com\/r\/web_design\/comments\/1ae2g0k\/are_stickyfixed_headers_going_out_of_style\/\" rel=\"noopener\">discuss\u00e3o no Reddit<\/a> capta esse debate, com alguns argumentando que cabe\u00e7alhos fixos s\u00e3o intrusivos, enquanto outros acreditam que s\u00e3o essenciais para a navega\u00e7\u00e3o moderna.<\/p>\n\n\n<p>Para resumir, aqui est\u00e3o algumas vantagens e desvantagens de cabe\u00e7alhos fixos:<\/p>\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Vantagens dos Cabe\u00e7alhos Fixos<\/strong><\/td><td><strong>Desvantagens dos Cabe\u00e7alhos Fixos<\/strong><\/td><\/tr><tr><td><strong>Navega\u00e7\u00e3o Melhorada: <\/strong>Os usu\u00e1rios t\u00eam acesso constante ao menu, facilitando a explora\u00e7\u00e3o do site.<br><strong>Aumento das Convers\u00f5es: <\/strong>Chamadas para a\u00e7\u00e3o persistentes podem incentivar os usu\u00e1rios a interagirem mais rapidamente.<br><strong>Engajamento Melhor: <\/strong>Para sites com muito conte\u00fado, cabe\u00e7alhos fixos mant\u00eam op\u00e7\u00f5es importantes sempre acess\u00edveis.<\/td><td><strong>Consumo de Espa\u00e7o na Tela: <\/strong>Em telas menores, os cabe\u00e7alhos fixos podem ocupar um espa\u00e7o valioso.<br><strong>Distra\u00e7\u00e3o Potencial: <\/strong>Se n\u00e3o projetados cuidadosamente, podem desviar a aten\u00e7\u00e3o do seu conte\u00fado.<br><strong>Impacto no Desempenho: <\/strong>Cabe\u00e7alhos fixos n\u00e3o otimizados podem afetar os tempos de carregamento das p\u00e1ginas.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\">Em Caso de D\u00favida, Considere Seu P\u00fablico<\/h3>\n\n\n<p>De acordo com pesquisas, as prefer\u00eancias por cabe\u00e7alhos fixos podem variar conforme o grupo demogr\u00e1fico. Quem diria, n\u00e9?<\/p>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/contentsquare.com\/blog\/the-3-golden-rules-of-sticky-menu-navigation\/\" rel=\"noopener\">As percep\u00e7\u00f5es da Contentsquare<\/a> relatam que os usu\u00e1rios mais jovens podem apreciar a conveni\u00eancia, enquanto o p\u00fablico mais velho pode achar confuso ou obstrutivo. Alinhar suas escolhas de design com as prefer\u00eancias do seu p\u00fablico-alvo \u00e9 crucial.<\/p>\n\n\n<h4 class=\"wp-block-heading\">Melhores Pr\u00e1ticas<\/h4>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Design Minimalista: <\/strong>Mantenha o cabe\u00e7alho limpo e sem aglomera\u00e7\u00f5es para minimizar distra\u00e7\u00f5es.<\/li>\n\n\n\n<li><strong>Controle do Usu\u00e1rio: <\/strong>Ofere\u00e7a op\u00e7\u00f5es para os usu\u00e1rios recolherem ou ocultarem o cabe\u00e7alho fixo se preferirem.<\/li>\n\n\n\n<li><strong>Responsividade: <\/strong>Certifique-se de que o cabe\u00e7alho fixo se adapta bem a diferentes tamanhos de tela, ou considere ocult\u00e1-lo em dispositivos m\u00f3veis.<\/li>\n\n\n<\/ul>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"877\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design.webp\" alt=\"Design responsivo mostrando as diferentes visualiza\u00e7\u00f5es do rodap\u00e9 fixo entre smartphone, tablet e desktop configurados no topo da p\u00e1gina\" class=\"wp-image-60692 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-300x164.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-1024x561.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-768x421.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-1536x842.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-600x329.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-1200x658.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-730x400.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-1460x800.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-784x430.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-1568x859.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/04_sticky_responsive_design-877x481.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/877;\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\">O Veredito<\/h3>\n\n\n<p><strong>Em \u00faltima an\u00e1lise, a decis\u00e3o de usar um cabe\u00e7alho fixo depende dos objetivos do seu site e das necessidades do seu p\u00fablico<\/strong>. Recomendamos testar seu impacto utilizando ferramentas de an\u00e1lise.<\/p>\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/a-b-testing\/\" target=\"_blank\" rel=\"noopener\">Testes A\/B<\/a> tamb\u00e9m podem fornecer informa\u00e7\u00f5es valiosas sobre como um cabe\u00e7alho fixo afeta o comportamento do usu\u00e1rio e as taxas de convers\u00e3o no seu site.<\/p>\n\n\n<h2 id=\"h2_conclusion\" class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n<p>Exploramos tr\u00eas maneiras simples de adicionar um cabe\u00e7alho fixo ao seu site WordPress:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Usando um Plugin: <\/strong>Ideal para iniciantes que procuram uma solu\u00e7\u00e3o r\u00e1pida, sem c\u00f3digo.<\/li>\n\n\n\n<li><strong>Usando configura\u00e7\u00f5es do tema: <\/strong>Aproveita as op\u00e7\u00f5es integradas para integra\u00e7\u00e3o perfeita.<\/li>\n\n\n\n<li><strong>Com CSS personalizado: <\/strong>Oferece m\u00e1xima personaliza\u00e7\u00e3o para aqueles que est\u00e3o confort\u00e1veis com programa\u00e7\u00e3o.<\/li>\n\n\n<\/ul>\n\n\n<p>Um cabe\u00e7alho fixo pode melhorar significativamente a experi\u00eancia do usu\u00e1rio ao aprimorar a navega\u00e7\u00e3o e manter elementos importantes acess\u00edveis. Para os propriet\u00e1rios de pequenas empresas, isso pode se traduzir em maior engajamento e aumento nas convers\u00f5es.<\/p>\n\n\n<p>Agora que voc\u00ea est\u00e1 equipado com o conhecimento para adicionar um cabe\u00e7alho fixo, \u00e9 hora de colocar isso em pr\u00e1tica! Escolha o m\u00e9todo que mais lhe convier e melhore a navegabilidade do seu site hoje.<\/p>\n\n\n<p>Pronto para levar seu site al\u00e9m do b\u00e1sico? Explore nossos recursos adicionais e continue sua jornada em dire\u00e7\u00e3o a uma presen\u00e7a online mais efetiva e envolvente.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Recursos Adicionais para Melhoria do Site<\/h3>\n\n\n<p><strong>Guias para Iniciantes:<\/strong><\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/learn-wordpress\/\" rel=\"noopener\">Aprenda WordPress, R\u00e1pido: 25 Recursos Para Come\u00e7ar<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/build-lead-generating-landing-pages-wordpress\/\" rel=\"noopener\">Como Construir P\u00e1ginas de Aterrissagem no WordPress para Gerar Leads<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/guide-to-wp-posts\/\" rel=\"noopener\">Postagens no WordPress: Aqui Est\u00e1 Tudo o Que Voc\u00ea Precisa Saber<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/time-for-website-redesign\/\" rel=\"noopener\">Sua Lista de Verifica\u00e7\u00e3o para Redesenho de Site para uma Revitaliza\u00e7\u00e3o Incr\u00edvel<\/a><\/li>\n\n\n<\/ul>\n\n\n<p><strong>Tutoriais:<\/strong><\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/change-wordpress-login-url\/\" rel=\"noopener\">Como Encontrar Sua URL de Login do WordPress e Melhor\u00e1-la para Seguran\u00e7a<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-block-patterns\/\" rel=\"noopener\">Decifrando o WordPress: Trabalhando com Padr\u00f5es de Bloco<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/customer-journey\/\" rel=\"noopener\">Sua Chave para Construir um Mapa de Jornada do Cliente Vencedor<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/what-to-do-when-locked-out-wordpress\/\" rel=\"noopener\">O Que Fazer Quando Voc\u00ea Est\u00e1 Bloqueado Fora do Admin do WordPress<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/how-to-do-keyword-research\/\" rel=\"noopener\">Pesquisa de Palavras-chave: Como Alcan\u00e7ar Mais Clientes com SEO<\/a><\/li>\n\n\n<\/ul>\n\n\n<p>Na DreamHost, estamos dedicados a empoderar pequenos empres\u00e1rios e gerentes de sites com as ferramentas e o conhecimento necess\u00e1rios para ter sucesso online. Desde solu\u00e7\u00f5es de hospedagem at\u00e9 tutoriais especializados, estamos aqui para apoiar sua jornada a cada passo do caminho!<\/p>\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-shared-hosting-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-shared-hosting.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/hosting\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Web Hosting<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tBuild the Website You&#8217;ve Always Wanted\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tFrom first idea to full launch, get everything you need to succeed online.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/hosting\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<p><em>Esta p\u00e1gina cont\u00e9m links afiliados. Isso significa que podemos ganhar uma comiss\u00e3o se voc\u00ea adquirir servi\u00e7os atrav\u00e9s do nosso link sem nenhum custo extra para voc\u00ea.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cabe\u00e7alhos fixos fazem com que os visitantes do site permane\u00e7am mais tempo. Aqui est\u00e3o 3 maneiras simples de adicionar um ao seu site WordPress \u2014 n\u00e3o \u00e9 necess\u00e1rio ter conhecimento em programa\u00e7\u00e3o!<\/p>\n","protected":false},"author":1081,"featured_media":60689,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Cabe\u00e7alhos fixos fazem os visitantes do site permanecerem por mais tempo. Aqui est\u00e3o 3 maneiras simples de adicionar um ao seu site WordPress \u2014 sem necessidade de experi\u00eancia em codifica\u00e7\u00e3o!","toc_headlines":"[[\"h-why-sticky-headers-take-your-website-up-a-notch\",\"Por Que Cabe\u00e7alhos Fixos Elevam Seu Site a Um Novo N\u00edvel\"],[\"h2_3-simple-ways-to-create-a-fixed-sticky-header-in-wordpress\",\"3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress\"],[\"h2_should-you-add-a-sticky-header-the-ongoing-debate\",\"Voc\u00ea Deve Adicionar um Cabe\u00e7alho Fixo? O Debate Continua\"],[\"h2_conclusion\",\"Conclus\u00e3o\"]]","hide_toc":false,"footnotes":""},"categories":[14409],"tags":[],"class_list":["post-72187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Cabe\u00e7alhos fixos fazem os visitantes do site permanecerem por mais tempo. Aqui est\u00e3o 3 maneiras simples de adicionar um ao seu site WordPress \u2014 sem necessidade de experi\u00eancia em codifica\u00e7\u00e3o!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress\" \/>\n<meta property=\"og:description\" content=\"Cabe\u00e7alhos fixos fazem os visitantes do site permanecerem por mais tempo. Aqui est\u00e3o 3 maneiras simples de adicionar um ao seu site WordPress \u2014 sem necessidade de experi\u00eancia em codifica\u00e7\u00e3o!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-20T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:21:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_blog_hero_1460x1095_adding_a_sticky_header_in_wp.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Alejandro Granata\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alejandro Granata\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress - DreamHost Blog","description":"Cabe\u00e7alhos fixos fazem os visitantes do site permanecerem por mais tempo. Aqui est\u00e3o 3 maneiras simples de adicionar um ao seu site WordPress \u2014 sem necessidade de experi\u00eancia em codifica\u00e7\u00e3o!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/","og_locale":"en_US","og_type":"article","og_title":"3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress","og_description":"Cabe\u00e7alhos fixos fazem os visitantes do site permanecerem por mais tempo. Aqui est\u00e3o 3 maneiras simples de adicionar um ao seu site WordPress \u2014 sem necessidade de experi\u00eancia em codifica\u00e7\u00e3o!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-12-20T15:00:00+00:00","article_modified_time":"2025-05-26T19:21:27+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_blog_hero_1460x1095_adding_a_sticky_header_in_wp.webp","type":"image\/webp"}],"author":"Alejandro Granata","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Alejandro Granata","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/"},"author":{"name":"Alejandro Granata","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/8bfafd9aede4ad5a3bca7f83b60e3f72"},"headline":"3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress","datePublished":"2024-12-20T15:00:00+00:00","dateModified":"2025-05-26T19:21:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/"},"wordCount":2268,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_blog_hero_1460x1095_adding_a_sticky_header_in_wp.webp","articleSection":["WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/","name":"3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_blog_hero_1460x1095_adding_a_sticky_header_in_wp.webp","datePublished":"2024-12-20T15:00:00+00:00","dateModified":"2025-05-26T19:21:27+00:00","description":"Cabe\u00e7alhos fixos fazem os visitantes do site permanecerem por mais tempo. Aqui est\u00e3o 3 maneiras simples de adicionar um ao seu site WordPress \u2014 sem necessidade de experi\u00eancia em codifica\u00e7\u00e3o!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_blog_hero_1460x1095_adding_a_sticky_header_in_wp.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/12\/01_blog_hero_1460x1095_adding_a_sticky_header_in_wp.webp","width":1460,"height":1095,"caption":"3 Simple Ways To Create a Fixed (Sticky) Header in WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/3-maneiras-simples-de-criar-um-cabealho-fixo-sticky-no-wordpress-pt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"3 Maneiras Simples de Criar um Cabe\u00e7alho Fixo (Sticky) no WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/8bfafd9aede4ad5a3bca7f83b60e3f72","name":"Alejandro Granata","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/Alejandro-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/Alejandro-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/Alejandro-150x150.jpg","caption":"Alejandro Granata"},"description":"Alex is one of our WordPress specialists at DreamHost. He is responsible for providing technical support, optimization tips, and assisting customers with internal migrations. In his free time, he enjoys cooking, playing videogames, and reading. Follow Alex on LinkedIn: https:\/\/www.linkedin.com\/in\/agranata\/","sameAs":["https:\/\/www.linkedin.com\/in\/agranata\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/alejandrogranata\/"}]}},"lang":"pt","translations":{"pt":72187,"en":60688,"es":60675,"it":68546,"fr":70738,"nl":70760,"ru":72182,"uk":72233,"pl":72251,"de":73034},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1081"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=72187"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72187\/revisions"}],"predecessor-version":[{"id":72193,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/72187\/revisions\/72193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/60689"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=72187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=72187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=72187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}