How to create a HAMBURGER menu in GreatPages

1. Access the page editor;

2. Click the gear icon in the top right corner of the screen;

3. Then click "Javascript & CSS";

4. Click to "Adicionar" a new code;

5. Choose a name for your code, select the "Funcionamento" option**,** remove the sample code and add the entire code below into the text field;

<style>
   /* Personalize o seu menu (ALTERE AQUI)*/
   :root {
     --color-icon: #268DF3; /* Cor do ícone */
     --color-background-icon: #FFFFFF; /* Cor de fundo do ícone */
     --text-color: #000000; /* Cor do texto */
     --text-background-color: #FFFFFF; /* Cor de fundo do menu */
     --hover-color: #B0C4DE; /* Cor de fundo ao passar o mouse */
     --menu-icon-size: 17px; /* Tamanho do ícone do menu */
   }

   /* Configurações gerais para o menu (NÃO ALTERAR) */
   @media (min-width: 768px) { .custom-menu { display: none; } }
   .custom-menu { background: var(--color-background-icon);box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);border-radius: 20%; padding: 5px; position: fixed; top: 12px; left: 12px; z-index: 9000;cursor: pointer; }
   .custom-menu-button { height:38px;pointer-events:none;color: var(--color-icon); background-color: transparent; padding: 10px; font-size: var(--menu-icon-size); text-transform: uppercase; font-weight: bold; border: none; }
   .custom-menu-content { background-color: var(--text-background-color); min-width: 170px; position: absolute; display: none; }
   .custom-menu-content a { color: var(--text-color); padding: 10px 14px; text-decoration: none; font-size: 15px; display: block; }
   .custom-menu-content a:hover { background-color: var(--hover-color); }
   .custom-menu.right .custom-menu-content { left: auto; right: 15px; }
   .custom-menu.left .custom-menu-content { left: 15px; }
 </style>

   <!-- Personalize o redirecionamento (ALTERE AQUI)-->
<div class="custom-menu left" onclick="toggleMenu()">
  <button class="custom-menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 448 512" style="width: var(--menu-icon-size); height: var(--menu-icon-size);"><path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></button>
  <div class="custom-menu-content">
    <div class="menu-content-url">
      <a href="URL_DA_PÁGINA/">Subtítulo1</a>
      <a href="URL_DA_PÁGINA/">Subtítulo2</a>
      <a href="URL_DA_PÁGINA/">Subtítulo2</a>
    </div>
  </div>
</div>

<!--Configurações gerais para o menu (NÃO ALTERAR)-->
<script>
function toggleMenu() {
     var menuContent = document.querySelector('.custom-menu-content');
     menuContent.style.display = menuContent.style.display === 'block' ? '' : 'block';
     event.stopPropagation();
   };
   window.toggleMenu = toggleMenu;
   document.addEventListener('click', function(event) {
    var menuContent = document.querySelector('.custom-menu-content');
    var menuButton = document.querySelector('.custom-menu-button');
    if (!menuContent.contains(event.target) && !menuButton.contains(event.target)) {
      menuContent.style.display = '';
    }
  });
 </script>

ESSENTIAL SETTINGS

Changing the Menu Title

To change the title of each menu item, replace the words in the code: "Subtítulo1", "Subtítulo2" and "Subtítulo3" with the names you want. 🙂

Changing the Menu Redirects

To change where each link should lead, look for the word "href" in the code. There, you can replace the link inside the parentheses with the URL you want. Do not remove the quotation marks.

Example: If you want the menu items to lead to our main page, you would need to change the links like this:

(Optional) Adding New Items to the Menu

If you want to add more items to the menu, it's easy. All you need to do is copy and paste a snippet of code, and that's it! Let's go:

Copy this code:

<a href="https://URL_DA_PÁGINA/">Novo Menu</a>

Paste the code you copied right below the links that already exist in the menu. After adding this line, the end of your code should look something like this:

<div class="dropdown-content">
    <a href="https://URL_DA_PÁGINA/">Subtítulo1</a>
    <a href="https://URL_DA_PÁGINA/">Subtítulo2</a>
    <a href="https://URL_DA_PÁGINA/">Subtítulo3</a>
    <a href="https://URL_DA_PÁGINA/">Novo Menu</a>
  </div>
</div>

SETTING UP THE LOOK OF YOUR MENU

Changing the Menu Icon color: To change the menu icon color, you can edit the " --color-icon: " property.

Changing the Menu icon background color: To change the icon background color, you can edit the " --color-background-icon: " property.

Note: If you want a transparent background, just enter: "var(transparente);" after --color-icon: . Example:

Text Colors: To change the color of the menu texts, you can edit the " ---text-color: " property.

Menu Inner Colors: To change the inner background color of the menu, you can edit the " --text-background-color: " property.

Hover Color: To set the color that appears when you hover over/click the menu items, you can edit the " --hover-color: " property.

Changing the Menu icon size: To change the icon size, you can edit the " --menu-icon-size: " property.

We've finished the tutorial and your menu is now ready to use! With all the customizations and adjustments made, you have transformed your menu to meet the needs of your site. 🎉

We hope this helped! If you have any questions, reach out to our support team. We're always here for you.

Updated on: 08/01/2026