Discover how to make your site navigation easier by adding a customizable navbar.

Custom Navbar overview

A responsive navigation bar (or navbar) can be found at the top of your site. It contains links to other site pages, any external links, and site branding — logo or site title.

⚡To add a customizable navbar to your Super site, head to your site’s dashboard and select Navigation where you will access all navbar settings.

1. Select a NavBar type

In the Navbar Type, you can pick from four navbar display options (open toggles for examples):

Default (displays an automatically updated page breadcrumb that cannot be customized)

Simple (links positioned on the right side of navbar)

Balanced (links are in the middle)

Minimal (links are always in overflow/popup menu both on mobile and desktop)

Hidden (hides your navbar menu)

2. Add page links to populate your navbar

To see what your navbar looks like in the site preview, you first need to add links to populate it:

• Under the Navbar Items, click Add Item
• Choose Page if you want to add an already existing page on your site or URL if you want to add an external link
• Give it a title and press Add Item
• Save Changes

The newly added link will automatically appear in your navbar. You can reorder your links by dragging and dropping them.

If something doesn’t look right, you can remove your links by clicking on each individual link and selecting Remove Link.

If using the Simple or Balanced navbar type you have too many page links to fit in your navbar, switch to Minimal. The condensed hamburger menu (three bars) will hold more pages.

3. Upload a logo or add a site title to describe your brand

Having a logo or site title in your navbar builds brand awareness and lets visitors familiarize themselves with the site owner(s).

1. Click Navigation Section, select Text to add the site name (you can also add emoji icons)
2. Adjust the font size if you chose to display text
3. If you have a logo, click on Image to upload it and use the slider to adjust its width

4. Customize the style of your navbar

It's easy to customize your navbar to fit your site's design with a few simple steps. Using the Style section, you can modify your navbar’s appearance:

• Background color
• Text color
• Height
• Visibility on scroll (enable the option to have a sticky navbar that follows the page as users scroll down or leave it unticked for a fixed navbar)
• Shadow (you can select the size, color, and opacity of the shadow)

When picking colors, you can manually click to select one, change its hue and opacity, or add HEX, RGBA, or HSLA values if you want to use a particular color. By default, the color picker shows HEX values; to access RGBA and HSLA, click on the two arrows next to the color value input field.

Add an attention-grabbing "Call to Action" button

With the Call to Action option, you can add and style a button to direct your site visitors’ attention to a particular page, asset, or anything else. It could be a special offer, a downloadable file, or the latest blog post – anything you want to promote or highlight.

The button will be located on the far right of your navbar, and you can link it to an existing page on your site or an external link:

• Set a title for your button
• Add a destination (select an existing page or add an external link by clicking on URL)
• Pick a background color

Set the CTA Color in Navbar Style Settings

Adding breadcrumbs to pages

• You can enable breadcrumbs by going to Super → Navigation Section → Navbar.
• Scroll down and look for “Show Breadcrumbs”, then tick the checkbox.
• The breadcrumbs will appear below your navbar.
• Finally, click Save Changes.