{"id":903,"date":"2022-08-09T11:40:40","date_gmt":"2022-08-09T11:40:40","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/09\/6456916-hostinger-website-builder-how-to-add-a-dropdown-menu\/"},"modified":"2026-03-16T12:12:07","modified_gmt":"2026-03-16T12:12:07","slug":"6456916-hostinger-website-builder-how-to-add-a-dropdown-menu","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6456916-hostinger-website-builder-how-to-add-a-dropdown-menu\/","title":{"rendered":"Hostinger Website Builder: How to Add a Dropdown Menu"},"content":{"rendered":"<p class=\"no-margin\">In <b>Hostinger Website Builder<\/b>, there are two ways to create a dropdown menu, depending on whether you want it to have a dedicated landing page or not:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_5eda50ad4f\" target=\"_blank\" class=\"intercom-content-link\">Create a simple dropdown menu<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_e20388f4e4\" target=\"_blank\" class=\"intercom-content-link\">Create a dropdown menu with a dedicated landing page<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_fb1f8c4ee7\" target=\"_blank\" class=\"intercom-content-link\">How to remove an item from the dropdown menu<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_761473480b\" target=\"_blank\" class=\"intercom-content-link\">Change the color background of a dropdown menu<\/a><\/b><\/p>\n<\/li>\n<\/ul><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Links (including dropdown menus) are often blocked in the editor and <b><a href=\"\/support\/6475345-website-builder-previewing-a-website\" target=\"_blank\" class=\"intercom-content-link\">preview mode<\/a><\/b> because some of them might not even technically exist until you <b><a href=\"\/support\/6475340-website-builder-publishing-a-website\" target=\"_blank\" class=\"intercom-content-link\">publish<\/a><\/b> or <b><a href=\"\/support\/6435697-website-builder-updating-a-website\" target=\"_blank\" class=\"intercom-content-link\">update<\/a><\/b> your website &#128161; <\/p>\n<\/div><p class=\"no-margin\">\n<\/p><h2 id=\"h_5eda50ad4f\">Creating a Simple Dropdown Menu<\/h2><p class=\"no-margin\">A simple dropdown menu expands automatically when a mouse is hovered over its title. The title won&rsquo;t be clickable, i.e., even if clicked, it won&rsquo;t open any page.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">1. Within the editor, expand the <b>Pages and navigation<\/b> panel on the left and click <b>Add a new dropdown<\/b> below:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/b3f9d451-7a49-40af-b9c8-90cdb5389c29.jpg\" width=\"320\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">A dropdown item will be inserted into your website&rsquo;s navigation menu.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">2. Rename the dropdown menu:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/75370001-32c2-4fd9-9190-38e1ecd45100.jpg\" width=\"400\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">3. To assign pages (or links) to a dropdown menu, drag each page (or link) by the 6 dots so that they would appear underneath the dropdown menu:<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_e20388f4e4\">Create a Dropdown Menu With a Dedicated Landing Page<\/h2><p class=\"no-margin\">A dropdown menu with a dedicated landing page expands automatically when a mouse is hovered over its title. However, unlike simple dropdown menus, the title is clickable and opens the main page of your dropdown menu.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">1. In your website editor, open the <b>Pages and navigation<\/b> section on the left. Choose a page that you want to be the main page of your dropdown menu. This means that the title of this page will be the title of your dropdown menu. You can also create a <b><a href=\"\/support\/6456705-website-builder-adding-more-pages-to-a-website\" target=\"_blank\" class=\"intercom-content-link\">new page<\/a><\/b> for it; it will be opened once someone clicks on the dropdown title.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">2. To create a dropdown menu, drag pages (or links) by the 6 dots so that they appear underneath your main dropdown page (towards the right, so it appears underneath the little page icon):<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/5033b56b-4fa2-4b2a-a0ea-7e56085d1bdb.jpg\" width=\"320\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_fb1f8c4ee7\">Removing Items From a Dropdown Menu<\/h2><p class=\"no-margin\">To remove a page or a link from the dropdown, expand the Pages and Navigation panel on the left and find the item (a page or a link) that you want to remove from the dropdown menu. Click on the settings wheel and select <b>Move out from dropdown<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/092eb1b8-1654-4cfe-95e1-53a1ba004dc7.jpg\" width=\"400\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">The removed item won&rsquo;t be deleted. It&rsquo;ll just become an individual item (a page or a link) visible in your navigation menu.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">If you delete the whole dropdown menu, the items that were assigned to it won&rsquo;t be deleted either; they&rsquo;ll become individual items (pages or links) and be visible in your navigation menu.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_761473480b\">Change the Background Color of a Dropdown Menu<\/h2><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">If you have the transparent header setting turned on inside your header settings, your dropdown background will also appear as transparent. <\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">In order to fix this: Go to the Header Settings, then turn off the Transparent Header setting:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/38bf0212-5bf9-4dd3-bbd1-b8630b285bbd.jpg\"><\/div><p class=\"no-margin\">Finally, select the specific background color you desire for the header (the same color you select for the header background will be set for the dropdown background).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create an expandable menu using Hostinger Website Builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[278],"tags":[],"class_list":["post-903","post","type-post","status-publish","format-standard","hentry","category-pages-and-navigation"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6456916-hostinger-website-builder-how-to-add-a-dropdown-menu\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6456916-hostinger-creador-de-sitios-web-como-agregar-un-menu-desplegable\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6456916-hostinger-createur-de-sites-web-comment-ajouter-un-menu-deroulant\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6456916-hostinger-website-builder-cara-menambahkan-menu-dropdown\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6456916-hostinger-svetainiu-kurimo-irankis-kaip-prideti-isskleidziama-meniu\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6456916-hostinger-criador-de-sites-como-adicionar-um-menu-suspenso-dropdown\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=903"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/903\/revisions"}],"predecessor-version":[{"id":3683,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/903\/revisions\/3683"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}