On this page
Overview
General Navigation Bar Settings
Nested Menus
The "Scrollable Text Nav + Image" block
All Collections
Zipify Pages - Tutorials & Documentation
Unique Page Blocks
The Navigation Element [Zipify Pages]
The Navigation Element [Zipify Pages]
This block allows you to create a navigation bar on your page.
Ezra Firestone avatar
Written by Ezra Firestone
Updated over a week ago

On this page

Overview

The "Navigation" element allows you to create a navigation bar which is essentially a collection of links, to help your customer's navigate your pages and/or store more easily:

Blocks that include the navigation element can be found in the "Headers & Footers" section of the page block library or by searching for "Nav" there:

General Navigation Bar Settings

To edit a navigation bar element included in a block, click directly on the element itself or click on the blue pencil icon in the top-right corner of the element that shows when hovering over it. Either action invokes the "Navigation Bar Options" popup:

You can set anywhere from 1 - 9 links for the bar. The available style customizations for links are:

  • Regular State font formatting: Font Family, Font Style, Font Color, Font Size and Background Color

  • Hover State font formatting with 3 options available: Change Opacity, Change Color, Underline

  • Option to open each individual link in a new tab when clicked.

For each link, enter in the following information:

  • Title (how it will be displayed on-page)

  • Type of destination for the link:
    - URL: specify the destination URL of the link, telephone number using tel: or email address using mailto:
    📝https (secured links) supported only.
    - ZP Landing Page: select an existing published ZP page (only published pages are available for selection).
    - ZP Blog Post: select an existing published ZP blog post (only published posts are available for selection).
    - Page Block: select a block on the page that you want the link to anchor to. *Useful for long pages so you can anchor to specific sections of the page from the navigation menu.

  • Click the "Add Link" button to add more links to the list.

  • Click the 🗑️ button next to the link you want to delete. 

  • You can drag-n-drop links into any desired position of the list. Left-click and hold on the drag-n-drop icon next to the title and then move it to the desired position.

Nested Menus

Currently, the only Header blocks which supports nested menus are:

  • Zipify Header

  • BOOM Store Header

  • Simple Text Nav

  • Scrollable Nav + Image

To add a nested menu to the navigation element in this block, follow the quick and easy steps below:

1. After adding a supported Header block to your page, click directly on the navigation element. That will open the sidebar where the "Navigation Settings" (1) button, "Main Menu Appearance" (2) and "Nested Menu Appearance" (3) sections will be located:

2. Click on the "Navigation Settings" button to open the nav link editor. There you can:

  1. Edit the order of links via drag and drop

  2. Edit the link titles

  3. Select a category or paste a link

  4. Add a nested link item

  5. Delete the link and any nested items it may have

  6. Add new menu links

3. To add a nested menu item(s), click the "Add Nested Item" button:

Additional nested menu items can be added (up to 10) by clicking the "+ Add Nested Item" link below each new nested item added.

Once you've added the desired menu and/or nested menu items, click the Save button to save your changes.

4. In the "Nested Menu Appearance" section on the sidebar, you're able to edit all of the styles you want used for any/all nested menu(s) you may have added to your navigation bar:

The "Scrollable Text Nav + Image" block

The "Scrollable Text Nav + Image" block is a great choice for a mobile menu that has many navigation links included on it. Unlike other header blocks that include navigation links, this one does not collapse into a hamburger menu on the mobile view. Instead, the nav links in the menu will be visible and additional links can be accessed by swiping left and right. The image element for this block can be enabled or disabled on Desktop, Tablet or Mobile views independently.

This block has a special set of settings that can be accessed by clicking the Navigation Settings button in the top-right corner of the block after hovering over it:

This opens the left sidebar menu where you can:

  • Edit the Layout and settings of the menu on Desktop, Tablet and Mobile views (1) independently from one another.

  • Set the Main Menu Appearance (2) for the menu across all views.

  • Set the Nested Menu Appearance (3) for the menu across all views.

When editing the Layout section, all settings there can be set independently on each view (Desktop / Tablet / Mobile). The following "Scroll Actions" for the Header behavior are available to choose from:

There's an option to "Show Images" for each view or not and the ability to set the Image Size (S/M/L) on each view.

📝On the Tablet and Mobile views, and additional "Swipe Assist Arrows" setting becomes available. Check the box to add swipe assist arrows on either of these views:

Use the in-app preview mode and switch to the Tablet or Mobile view to see a preview:

Did this answer your question?