The Header of your site contains your navigation, logo, and call-to-action buttons - all of which can be configured. To make changes, click anywhere on the Header to open the configuration panel on the left of the website editor.
Layout
Some themes have layout options, which control the position of navigation links or if the header is fixed.
Logo
To customize or hide your site logo, expand the Logo options. There are three options for your site logo: text, image, or none.
Text
This option is great when you don’t have or need a logo image. We provide several options when using a text logo:
- Text logo color - Specify a color for your logo text.
- Text logo font - Choose a unique font specific to your logo.
Image
If you have an image logo, we provide two upload options: light background and dark background. You can use the same image for both or provide one for each that looks better on either background type. We provide a few different options for image logos:
- Remove - Click this button to remove the image. This will give you the option to upload another image instead.
- Logo Size - This dropdown has preset image sizes to quickly change the size of the logo. Note: This option may not be present on all themes.
- Width - With this option you can specify a specific, numerical size for your image logo. On themes which also have the Logo Size option, this option will override that setting.
Note: You can also resize an image logo directly. Click on the Small Blue Square on the bottom right of your logo and drag to increase or decrease the size of your logo.
None
For some sites, you might prefer having a large image at the top of your content rather than as part of the header. Choose this option to turn off the logo entirely.
Navigation
We offer many different options for what you can add as a link in your site navigation, from site pages to files to phone numbers and email.
Tip: As your navigation grows, consider clicking the Expand Icon to the top right of the navigation options. This will open a larger popup window which makes it easier to manage larger, more complicated menus.
Add a Link
Simply click the Add Link button, choose the page and options, and click Save. To change the position of a page, click and drag it to a different position within the list of links.
Note: If you don’t see links as you add more, you may need to scroll through the list to see and edit all of your navigation.
Create a Subpage
To make a subpage, click on a link and then click on Add Nested Link. You can repeat this with nested links, too, creating deeper and more complex navigational structures. Note that you can also click and drag navigation links to different positions within the list, both at the top level and as sub pages of other pages.
Edit a Navigation Link
To edit an existing link, click on it in the list of links on the left and choose Change Link.
Delete a Navigation Link
To delete an existing link, click on it in the list of links on the left and choose Delete Link.
Collapse Navigation
On themes that support this option, toggling it on will collapse your navigation into a menu icon on all screen sizes rather than only on smaller screens.
Enable ‘More’ Collapse
As your navigation grows, it may take up more space than is available within the navigation area of your header. With this option toggled on, links will be automatically placed under a ‘More’ dropdown menu as needed so your navigation fits within the available space. By default this is toggled on.
‘More’ Collapse Label
If you have the ‘More’ option toggled on, you can edit the text used for the link. By default this is set to “More…”.
Force Mobile Navigation Menu
With this option toggled on, the mobile menu and icon will always be shown regardless of screen size. By default this option is toggled off.
Mobile Navigation Breakpoint
For more control over when the mobile navigation is shown, use this option to select which screen size the menu first collapses. By default this is set to tablet, but you can also choose phone or small desktop.
Call to Action
To add a call-to-action button, toggle on Show Call to Action. Next, click Edit Link and choose what you want to link to. Finally, edit the Call to Action Label to update the text of the button.
Phone Number
You can display a phone number in your site header that visitors can click on to easily make phone calls to you.
Note: that this option may not be available in all themes.
- Show Phone Number - Toggle this option on to show a phone number in your site header. By default this is toggled off.
- Phone Number - Edit this field to the phone number you’d like to use.
Search
Some themes support adding a search bar to the header. We provide the following options to customize search in your header:
- Show Search - Toggle this option on to display the search field in your header.
- Search Placeholder - This text is shown in the field until a visitor types in the field.
- Search Background - By default the search field has no background; you can use this option to set a color, gradient, image, or image with overlay as the background.
- Search Border - With this option you can customize the width, color, and style of the border around the field.
- Search Text Color - Use this option to customize the color of text within the search field.
Social Links
Like search, some themes support showing social media icons in your header.
- Show Social Links - Toggle this option on to show icons in your header. Note that you’ll need to enter an account name for a network for it to show.
- Social Links - These are the networks that will show within the header. To remove one, click the red X for the network. To add more, click the Add Social Account button and click on a network icon.
- Text Color - With this option you can customize the color of your social media icons.
Login and Signup
If you’ve set up membership on your site, toggle on the Show Login and Signup option to show buttons for both. You can also edit the labels for both buttons if you would prefer different text.
Note: You can hide the signup button by leaving the Signup Label field blank.
Design
Design options provide further control over the overall look of your header. Note that there may be some differences in design options available depending on the theme.
Background
There are three four options for the background of your header:
- None - No background is used so the site background is visible.
- Color - A single color of your choosing is shown as the background of the header. You can choose a color and set the opacity.
- Gradient - You can choose two (or optionally, three) colors to create a gradient background, as well as specify the direction and opacity.
- Image - You can upload an image as a background of your header. With this option you can choose how it repeats, how it’s positioned, the size, and if you want it to have a parallax effect.
- Image with Overlay - With this option, you can upload an image and also set a color overlay. This is helpful if the image you want to use could make readability more difficult; adding a color overlay can make it easier to read text on top of it.
Menu Button Color
You can set up a custom color or more for the mobile menu icon used in your header. Similar to the background of the header itself, you can choose between the following:
- None - Use button colors already defined for your site.
- Color - Specify a custom color and opacity.
- Gradient - Set a color gradient as the background of the button.
-
Image - Use an image for the background of the button.