Customizing your navbar in the Website Builder

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.

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.

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.

Once you're in the navbar editor, you can add new menu items, edit existing ones, and rearrange their order.

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. 
   
   
   
3. Set the Label (the text visitors will see).
   
   
   
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. 
   
   
   
   
   
   
    
5. Customize styling options like text color, background color, and button style as needed. 

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 to see them live on your site. 

Click and hold on an item, then drag it to its new position within the navbar.

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.

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.

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.
   
   
   
3. Turn it on to make the item visible in the mobile hamburger menu. 

1. Switch to Mobile view using the mobile icon at the bottom of the editor.
   
   
   
2. Click the hamburger menu icon in the mobile navbar preview.
   
   
   
3. In the design panel on the right, find the Dropdown settings. Customize the dropdown background color, link colors, and layout to your preferences.
   
   
   

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.

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.
   
   
   

The navbar will be hidden on that specific page but will continue to appear on all other pages where it's enabled.

Changes to the navbar are automatically saved as drafts. If you're not seeing your changes:

• Make sure you're publishing your site to make draft changes live.
• Check that you're editing the navbar through the Globals panel, not just selecting it on a page.

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.

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.
  
  
• Enable Show on mobile for items you want to appear in both views.
  
  
• Customize mobile-specific styling through the hamburger menu dropdown settings.
  
  

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.