Sticky Menu no WordPress

porLuis Augusto Moretto

Sticky Menu no WordPress

Você já reparou que muitos sites populares estão usando o menu de navegação fixo também chamado de Sticky Menu. Normalmente, os menus de navegação são exibidos na parte superior e desaparecem quando os usuários rolam para baixo.

Este tipo de menu é simplesmente fixo no lugar. Isto significa é que o menu pode ser acessado de qualquer lugar em uma página sem a necessidade de rolar para cima ou para baixo.

Essa rigidez, se assim podemos chamá-lo, também pode ser aplicada a cabeçalhos, rodapés, botões de mídia social e coisas do tipo. 

Os menus de navegação fixos flutuam enquanto os usuários rolam para baixo e estão sempre visíveis na tela. Neste artigo, mostraremos como criar facilmente um menu flutuante de navegação no WordPress.

Usando Sticky Menu para o Elementor

Para quem está familiarizado com o Elementor uma forma e construir um Sticker menu é usando um plugin do WordPress.

Plugin é simples e funciona em combinação com Stylepress e outros integrados ao Elementor.

Sticky menu com CSS

Para quem quer criar seu próprio tema vamos mostrar um demo de como criar um Sticky menu com CSS + HTML + JAVASCRIPT

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>

Sticky jQuery

Para quem curte o jQuery existe um plugin que faz todo o trabalho para você!

Permite que além do menu qualquer elemento HTML fique sempre visível!

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

Vantagens do Sticky Menu

A coisa mais importante sobre um menu fixo é a navegação fácil, o que é bastante óbvio até agora. Permite aos usuários acesso fácil e rápido a qualquer outra página ou seção de um site. Pesquisas mostram que a navegação pegajosa torna a navegação mais de 20% mais rápida, e é também que quase 100% dos usuários preferem. 

A navegação pegajosa também pode ser usada para criar um site ou página da Web de uma maneira melhor. Lembre-se, um usuário pode desaparecer em um piscar de olhos. A retenção é a chave aqui.