Need help? You’ve come to the right place

What’s New Getting Started Building Integrating Publishing

Customize site header and navigation

Last Updated

The header of your site is crucial to your visitors being able to comfortably navigate your site. Use the header editor to edit the layout and styling of your header and navigation.

 

Edit your header

To edit your site header, hover over it and click Edit Header.

A settings panel will open with all of your header customization options.

NOTE: If you're looking to edit or rearrange the content in your navigation, hover over it and click Edit Navigation. Learn more about site pages ↗

Manage header layout

Your site template has a default header layout, however, there are numerous other header layout options.

To change header layouts, click on the preview of your current layout below "Header Layout" and select a new one.

Edit your logo

To edit your site's logo, simply click on the logo in the builder or hover over the logo and click "Edit Logo."

You will then be able to choose either an image or text logo.

For image logos, you can choose to upload an image you have as well as adjust its size.

If you don't have one yet, you can easily create a custom logo with LogoMakr by clicking "Try this" below the size slider.

If you'd rather use a text logo, choose the "Text" tab in the logo options. Enter the logo text and customize its font, size, style and color.

Add call-to-action button

A call-to-action button can be added to any header layout to open a pop-up to drive leads, open a Calendly pop-up, go to an external URL, a Lead Page, or jump to another section on the site page.

To add a call-to-action button to your site header, click the + icon in your header, then "Add Button."

Or, in the header's settings, toggle "Include call-to-action" to the on position.

Call-to-action buttons are powerful. Here's a few more resources on buttons and your click event options:

Remove call-to-action button

To remove your header's call-to-action button, hover over the button and click the trash icon.

Styling your header

Within the header settings are styling settings that allow you to change your navigation fonts and colors as well as the header's height.

Header height and background color

In the header settings dock under the "Header" tab, you'll see the options to change both the header height and background color of your header.

When using the color picker, you can choose from your brand colors, a few recent colors, or click ADD next to "Recent Colors" to enter hex codes or select a different color/opacity for your header background.

Navigation font, color and size

For quick access to navigation settings, hover over your navigation and click Edit Navigation.

Under the "Navigation" tab in the header settings dock, you can adjust the font, font colors, and size of the navigation items.

Frequently asked questions

What fonts are available? Can I upload my own text/font style?

We provide a curated selection of some of the most popular Google Fonts. We don’t support uploading custom fonts at this time, though you can use web fonts if you’re comfortable with CSS and HTML.

Can I create a sub navigation menu?

Absolutely! In the Pages tab of the builder, you can drag a page over the top of another to create a drop-down menu in your primary navigation. Learn more about how to create sub navigation menus here.


Need more help?

You can always get in touch with our support team—just click help_circle in the top-right corner of your Leadpages dashboard, or submit a ticket ↗

Was this article helpful?
Powered by Zendesk