--- title: "Customizing your navbar in the Website Builder" updated: 2026-07-28 --- # Customizing your navbar in the Website Builder > **Notice** > > This article covers the Website Builder, which is continuously evolving based on customer feedback. Some details seen here may differ from what you see in-app. The navbar (navigation bar) is the menu at the top of your website that helps visitors navigate between pages. In the beehiiv Website Builder, you can fully customize your navbar by adding links, buttons, dropdowns, and user account controls. Changes you make apply site-wide across all pages, and you can control how the navbar appears on both desktop and mobile devices. --- ## How to access your navbar for editing Your navbar is a global element, which means it appears consistently across your entire website. To edit it, you need to access it through the **Globals** panel. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298460781079) 1. From your beehiiv dashboard, go to **Website > Builder**. 2. In the left icons menu, click the **Globals** icon. 3. Under **Navigation**, click the **3 dots menu** next to **Navbar**.  4. Click **Edit global navbar** to open the navbar editor. **Alternative method**: Click directly on the navbar element on any page's canvas, then click **Edit Navbar** in the design panel on the right. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298467623447) > **Reminder** > > Changes you make to your navbar are automatically saved as drafts. To make them visible on your live website, you must publish your changes by clicking **Publish** in the top right corner of the Website Builder. --- ## Adding and editing navbar items Once you're in the navbar editor, you can add new menu items, edit existing ones, and rearrange their order. ### Adding a new link or button 1. In the **navbar editor**, click on any existing navbar item or group where you want to add a new item. 2. To add a link, click the **+** **icon menu** to see your navbar block options. Drag and drop your link onto your navbar wherever you want it to live.  ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298460783127) 3. Set the **Label** (the text visitors will see). ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298467626135) 4. Set the **Link URL** (where clicking the item will take visitors). Choose between **Pages** on your website, **Anchors** (content that you’ve created as headings on your site)**,** or **Custom** for custom link options (**URL**, or contact for direct contact options, **Email** or **Phone**). Click **Set Link** once you’ve made your selection.  ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298467628951)   5. Customize styling options like text color, background color, and button style as needed.  > **Pro Tip** > > When adding links to custom pages, make sure the custom page exists first. You can create custom pages through the **Pages** panel in the left icons menu. ### Editing an existing navbar item 1. In the navbar editor, click the navbar item you want to edit. 2. In the design panel on the right, you'll see options to change: **Label**, **Link URL**, **text color**, **background color** (for buttons), and other styling options like font size, weight, padding, and border radius. 3. Make your changes: they're automatically saved to your draft. [Publish your changes](https://beehiivhelp.zendesk.com/hc/en-us/articles/34055410040727) to see them live on your site.  ### Rearranging navbar items Click and hold on an item, then drag it to its new position within the navbar. --- ## Customizing mobile navbar behavior The navbar behaves differently on mobile devices compared to desktop. On mobile, the navbar typically displays a hamburger menu icon that opens a dropdown overlay. You can control which items appear on mobile and customize the mobile menu separately. ### Switching to mobile view At the bottom of the navbar editor, click the **Mobile** icon to switch the canvas to mobile view. The navbar will now display as it appears on mobile devices, typically showing a hamburger menu icon. ### Controlling which items appear on mobile By default, desktop navbar items may not automatically show in the mobile menu. To ensure an item appears on both desktop and mobile: 1. Select the navbar item you want to configure. 2. In the design panel on the right, find the mobile visibility toggle. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298467629719) 3. Turn it on to make the item visible in the mobile hamburger menu.  ### Customizing the mobile hamburger dropdown 1. Switch to **Mobile** view using the **mobile icon** at the bottom of the editor. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298460786967) 2. Click the hamburger menu icon in the mobile navbar preview. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298460787479) 3. In the design panel on the right, find the **Dropdown** settings. Customize the dropdown background color, link colors, and layout to your preferences. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298460788375) --- ## Publishing your navbar changes Your navbar customizations are saved as drafts automatically, but they won't appear on your live website until you publish. For more information, read [How to publish your website](https://beehiivhelp.zendesk.com/hc/en-us/articles/34055410040727). --- ## Disabling the navbar on specific pages 1. Navigate to the page where you want to hide the navbar. 2. From the Website Builder left panel, click the **Globals** icon. 3. Click the **3 dots menu** next to **Navbar**, then select **Disable for this page**. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298460788631) The navbar will be hidden on that specific page but will continue to appear on all other pages where it's enabled. > **Reminder** > > This only affects individual pages. To edit the actual navbar content and design, you still need to access it through the **Globals** panel. --- ## Troubleshooting common navbar issues ### My navbar changes aren't saving Changes to the navbar are automatically saved as drafts. If you're not seeing your changes: - Make sure you're [publishing your site](https://beehiivhelp.zendesk.com/hc/en-us/articles/34055410040727) to make draft changes live. - Check that you're editing the navbar through the **Globals** panel, not just selecting it on a page. ### My custom page doesn't appear in the navbar 1. First create the custom page through **Pages > New Page +** in the left icons menu. 2. Then edit your navbar through **Globals > Navbar > Edit**. 3. Add a new navbar item and set its link URL to your custom page's URL path. > **Pro Tip** > > Copy your custom page's URL from the Pages panel to ensure accuracy. ### The navbar looks different on mobile vs. desktop This is expected behavior. Desktop and mobile navbars have independent layouts. Desktop typically shows a horizontal menu bar, while mobile displays a hamburger icon that opens a dropdown overlay. To ensure consistency: - Use the **mobile view** to check how your navbar appears on mobile. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298460786967) - Enable **Show on mobile** for items you want to appear in both views. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298460789271) - Customize mobile-specific styling through the hamburger menu dropdown settings. ![](https://beehiivhelp.zendesk.com/hc/article_attachments/42298467636887) ### My navbar is covered by page content or appears behind other elements This can happen if z-index or positioning is conflicting. Check: - The navbar's position settings (sticky, floating, or static). - Whether sections on your page have custom z-index values that place them above the navbar. ---