The Navigation Block is the Header of your website, located at the top of every page. Visitors can click on the pages or menu items linked in the Navigation Block to navigate around your website.
While the Navigation Block cannot be removed from your website pages, there are some options available to help you customize the look of the Navigation Block.
How to Customize the Navigation Block
- In your Zenfolio account, click on the
Website icon to enter the Website Editor.
- Once in your website editor, select the Navigation Block at the top of any page.
- On the left-hand side, you will find the different options that can be used to customize your Navigation Block.
- And on the right-hand side you can change the Layout of the Navigation Block.
Changing the Layout
With your Navigation Block selected, use the Layout option on the right-hand side to choose between layouts A, B, and C.
Customize the Options
Once you've decided on the layout you are wanting to use, you can then further customize the options of the Navigation Block, on the left-hand side.
There are two overall sections of options to choose from – Appearance and Background.
Appearance
|
The Appearance options will allow you to turn on things like Sticky Nav, show or hide the Logo, and choose how many menu items will be seen. Sticky Nav will make your Navigation block stay visible at the top of the page when scrolling down the page. If Sticky Nav is disabled, the navigation block will disappear as you scroll down. Show Logo will allow you to display the image or text Logo that you've added to your website. You can also choose what size the logo will be. Number of Items determines how many page menu items will be seen in your Navigation Block. If you have more publicly visible pages than the number of items allowed, a "More" dropdown menu will be seen to contain the rest of your menu items. Additionally, if the browser width of a visitor is not wide enough to display all of the items, they will be added to the "More" dropdown. Dividers and Spacing will determine whether or not there are dividers between each of the menu items and how much space is between each item. Hover State will determine whether your menu items are underlined or lightened when hovered over. Dropdown determines what kind of background your dropdown menus will have when someone hovers over the main menu item. |
Background
|
The Background options will allow you to customize the appearance background of the Navigation Block. Color will allow you to select from White, Cream, Grey, or Black background colors. When you choose the background color, the color of the text and icons in the Navigation Block will be automatically adjusted to be clearly visible on the background color. Transparent Background enables some additional options that will determine the Opacity Amount of the transparent background, and whether or not the Navigation Block will Overlap the Hero Block. |
Example of Transparent Background and Hero Block Overlap being enabled:
Because the color of the text in the Navigation Block will be determined by the Background Color (i.e. the White and Cream background will result in Black text, and the Grey and Black background will result in White text), if you are intending to use the Background Transparency option, there are some important design notes to keep in mind:
- If the image you're using for your Hero Block has a lighter color palette, you may want to choose White or Cream as the Background Color to ensure that the darker text color will be legible over the image, as an example. You can also choose the 30% or 60% opacity options to help with this.
- Also, to avoid illegible text overlap, we recommend not using 30% or 60% opacity if you have the Sticky Nav option enabled. Here's an example of what using 0% opacity could look like as the page is scrolled:
Customize the Menu Items (Pages) in the Navigation Block
When setting up your website, any Public Pages that you create will appear in your site's Navigation Block. See this article for more information about creating new Pages.
How to Make Pages Public
- In your Zenfolio account, click on the
- Choose the
Navigation tab.
- Locate the Draft or Hidden page you want to make Public and click on the
ellipsis icon.
- Choose Move to Public.
How to Change the Order of Public Pages
Once you've added Public Pages to your website, that will appear in your site's Navigation Block header, you can also rearrange and change the order of these pages.
|
For more information about using Dropdown menus to further organize your site's navigation menu, see this article HERE.