Customizing The Navigation Block

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.

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.

Sitewide search allows your website visitors to be able to locate searchable content according to their search terms.

Font Size will allow you to adjust how small or large the nav bar menu items are.

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.

The On Scroll options will allow you to determine how the navigation block, header of your website, reacts when visitors are scrolling up and down your website pages.

Scroll With Page will cause the navigation block to disappear when scrolling down the page. To get the navigation block to reappear the visitor would need to scroll all the way back to the top of the page.

Hide/Show on Scroll will cause the navigation block to disappear as the visitor scrolls down the pages. When the page begins scrolling back towards the top, the navigation block will appear again automatically.

Sticky will result in the navigation block always being visible on the page.

The Background options will allow you to customize the appearance background of the Navigation Block.

Color will allow you to select from a variety of 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, if your design settings use adaptive text.

Opacity allows you change the opacity level of the background. If set to 0 the background will be fully transparent.

Some additional options are provided so that you can choose whether or not the navigation block background and font color changes when certain events occur (on hover or on scroll).

You can also choose 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:
  

The Appearance options will allow you to show or hide the Logo, choose what information or icons are seen, and choose how many menu items will be seen.

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.

Description allows you to add any additional text you might want displayed here.

Number of Items determines how many 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.
You can also determine the style any dropdown menus items you have are displayed. Whether they're displayed with hidden dropdowns, indented, or grouped together.

Hover State will determine whether your menu items are underlined or lightened when hovered over.

Account, Cart and Search Icons position will determine if these particular icons appear above or below your logo and menu items.

Sitewide search allows your website visitors to be able to locate searchable content according to their search terms.

Footer Options will provide you with the ability to add some information that will typically be found in the Footer of a website. Because the left navigation bar combines the Header and Footer together, you your Business name, address, and phone number can all be added here. There is also a custom field if you wanted to add some additionally information, like your businesses operating hours.

Social Media can be switch ON or OFF to determine if social media icons will be seen for any social pages you've provide links for.

The Background options will allow you to customize the appearance background of the Navigation Block.

Color will allow you to select from a variety of 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, if your design settings use adaptive text.

1. While in the Navigation area of the website Editor, hover your mouse pointer over the icon to the left of the Page name.
2. Click and drag the icon that appears to move the page up or down in the list.
3. Drop the Page in the position you'd like it to appear in your Navigation Block.