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.
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 site page, a landing page, or jump to a 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 settings, click "Add Button to Header."
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.
Or, in the header settings, click "Remove Button from Header."
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.
Show when scrolling
To make sure visitors always have easy access to your site's primary navigation, you can set your header to travel with the page as the page scrolls.
Under the header's settings, toggle "Show when scrolling" to the on position. A custom scrolling header height and logo size can be set so that as visitors scroll, the header is visible, but not as large as it is at the top of your site.
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?
Leadpages offers over 60 fonts to choose from,listed here, as well as the ability to upload your own custom font.Learn how ↗
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.
Can I change which URL my logo is linked to?
No, the logo within a site’s header will always link to the homepage set in the site template.
Need more help?
You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗