Header Navbar (Menu Element) Settings

The Header Navbar is the menu bar that sits at the top of your page — the row of links like Home, About, Pricing, Contact that lets visitors jump around your site. A clear navbar makes your page feel professional and helps people find what they're looking for instead of leaving.

This guide walks you through adding a navbar, building your menu (and dropdown sub-menus), adding your logo, styling the text, and customizing the mobile menu.

Prefer to watch? Here's the full video walkthrough:

A quick note on where the navbar lives

The Header Navbar isn't a regular element you drop into a column — it's one of the section types you add from the Components panel (alongside Standard Section, Hello Bar, etc.). So you add it the same way you'd add any section, and then open its settings to build the menu. That's why this is sometimes called the "Menu Element" — the navbar section is your menu.

A couple of plain definitions before we start, since these words come up a lot:

• Menu item — a top-level link in the bar, like Home or About.
• Sub-menu — the dropdown links that appear under a menu item when a visitor hovers or taps it. For example, under About you might have Our Team and Our Story.

Step 1 — Add a Header Navbar section

In the Landing Page Editor, add a Header Navbar section to your page. (It goes at the very top, since that's where a menu belongs.)

Step 2 — Open the navbar's settings

Click the Header Navbar section to open its settings. This is where you'll add and edit your menu items and sub-menus.

Menu and Sub-Menu Settings

This is where you build the actual menu — adding items, creating dropdowns, naming them, and pointing them at the right pages.

Add Menu — Click Add Menu to add one more top-level item to the bar. Do this for each main link you want (Home, About, Pricing, and so on).

Add Sub-Menu — Click on a menu item, then Add Sub-Menu to create a dropdown link inside that item. Use this when one menu heading should reveal several choices.

Each click of Add Sub-Menu adds one more sub-item under the selected menu item.

For each menu or sub-menu item, you have three things to set:

• Edit — Change the text label of the item using the Add Text option (e.g. rename "Menu 1" to "Pricing").
• Add Link — Set where the visitor goes when they click. Paste the full URL of the page you want them to land on. (Tip: include the full address, e.g. https://yourdomain.com/pricing, not just pricing.)
• To Open it — Choose which window the link opens in: Same Window (replaces the current page — good for links within your own site) or New Window (opens a new tab — good for external links so visitors don't lose your page).

Delete — Click the delete (trash) icon next to any item to remove that menu or sub-menu.

Want a menu item to jump to a section on the same page (e.g. "Pricing" scrolls down to your pricing section) instead of opening a different page? That uses a section's CSS ID rather than a normal link — see How to redirect to a particular section after clicking on a header menu.

Image Settings (your logo)

This is where you place your logo in the navbar — most businesses put their logo on the left of the menu bar.

• Show Image — Tick this checkbox to display an image (your logo) in the navbar.
• Select Image — Choose the image to show.
• Image Action — Set the URL the visitor goes to when they click the logo (most people link this to their homepage), and pick which window it opens in.
  
  Menu Style Settings

Text size — How big the menu text is.

Font family — The style of font used.

Font weight — How thick the text is (e.g. Bold, Normal, Light).

Text Color — The color of the menu/sub-menu text.

Background Color — The color behind the menu/sub-menu.

• Image — Adjust the height and width of your logo so it fits the bar nicely without looking stretched.

Hamburger Settings (the mobile menu)

On phones there isn't room for a full row of menu links, so the menu collapses into a small three-line icon in the corner — this icon is called a "hamburger" (the three lines look like a burger in a bun). When a visitor taps it, your menu opens. These settings let you style that icon to match your page.

• Icon Color — The color of the three lines inside the hamburger.

• Background Color — The fill color of the box the hamburger sits in.

• Border Color — The color of the outer lines (border) around the hamburger box.

And that's how you design the mobile hamburger menu of your navbar.

Common situations & quick fixes

"I clicked a menu item but nothing happens / it goes nowhere." The item probably has no link set, or the link is incomplete. Open that menu item, use Add Link, and paste the full URL (starting with https://). A label without a link won't take visitors anywhere.

"My menu disappeared on mobile!" It hasn't disappeared — on phones the menu collapses into the hamburger (the three-line icon). Tap it and your menu appears. This is by design so the menu fits a small screen. If the hamburger is hard to see, adjust its Icon/Background/Border colors in Hamburger Settings.

"My dropdown (sub-menu) isn't showing." Make sure you added the sub-menu inside a menu item (select the parent menu item first, then Add Sub-Menu). Sub-menus appear when a visitor hovers (desktop) or taps (mobile) the parent item — they're hidden until then.

"My logo looks stretched, squashed, or too big." Adjust the height and width under Menu Style Settings, and change them together in proportion so the logo keeps its shape. Uploading an image that's already roughly the right size and a transparent PNG usually looks cleanest.

"Clicking a link sends visitors away and they lose my page." For links to other websites, set To Open it to New Window so your page stays open in the original tab. Use Same Window only for links within your own site.

"I want a menu item to scroll to a section on the same page, not open a new page." That's done with a section's CSS ID instead of a URL — see How to redirect to a particular section after clicking on a header menu.

"My changes aren't showing on the live page." Edits in the editor need to be saved and published before visitors see them. After editing the navbar, save, and re-publish if the page is already live.

"The menu looks fine on desktop but cramped on mobile." Switch to Mobile View in the editor and check the navbar there separately — you can fine-tune sizes for mobile without changing your desktop layout.

Still stuck?

If your navbar or menu links won't behave as expected after trying the steps above, submit a ticket and tell us which page you're editing and what's happening — a screenshot of your navbar settings helps us sort it out quickly.