Navigation Best Practices

Below are the best practices for making changes to a business/site navigation bar.

All types of changes outlined below should be done in the theme editor of the business/site whose navigation you want to edit.

Note that all changes made to the navigation are live immediately after they are saved. If you need to “undo” a change, you will have to go back into the theme editor, make the necessary change, and re-save.

Accessing the Theme Editor

1. Click on the Businesses tab on the left hand side of the Site Builder. Search for and click on the business whose nav you want to update. Its associated site should appear to the right.

2. Click the Actions dropdown to the right of the site name, then click Open Builder. You should be redirected to that business’s builder, and the associated site template should be visible.

3. Click on the Theme Editor button (</>) on the right side of the Site Builder’s navigation.

4. Click on the Header Template tab. This is where your edits will be made.

Opening the Theme Editor’s Search Bar

Once you have the Header Template pulled up, click anywhere in the editor so that your cursor is blinking inside of it. Press Ctrl + F (or Command + F on Mac) to open the editor’s search bar. You can search for existing nav item titles, HTML element types, etc., which makes making changes to the nav a little faster.

A Note About HTML Elements

HTML elements are the building blocks of a website. There are many different kinds of elements, but the three that are relevant to changing a nav item are:

• <ul> (“unordered list”)
• <li> (“list item”)
• <a> (“anchor”... think of this as a link to another page)

An HTML element is composed of two tags (an opening tag and a closing tag). Each tag is denoted by a set of “angle brackets” (perhaps better known as greater than/less than signs), i.e. < and > Content that the user will see lives between these sets of brackets.

An opening tag contains brackets and the element type, while a closing tag contains brackets, a slash, and the element type.

• Example opening tag: <li>
• Example closing tag: </li>

HTML comments

An HTML comment looks like this:

<!-- commented out content -->

To comment out content, highlight it and type Ctrl + / (or Cmd + / on Mac). To uncomment it, highlight the content and type Ctrl + / (or Cmd + / on Mac) again.

Types of Changes You Can Make

Adding a new link to the navigation

1. Search the editor for “ul”. This should highlight a single <ul> tag, but you have to make sure it’s the correct one (both the main nav and subnavs are built with these elements). Ensure that it’s the correct one by confirming that it contains <li> elements that align with the nav you want to add a link to (i.e. either the main nav or a specific subnav… for subnavs, please see below). To jump between <ul>’s, use the up/down arrows near the search box.

2. Once you’ve located the correct <ul> element, you’ll need to add a new <li> element with an <a> element inside of it. To do this, copy and paste one of the existing <li> elements that lives within the <ul>. 

3. By copying and pasting an existing <li>, you should already have all the necessary attributes on your new item (i.e. class, role, etc.). Ensure that these match word-for-word with the existing <li> elements, then move on to step 4.

4. Lastly, update the content between the <a>’s href attribute to where the new link should redirect to. This could either be a relative path (ex: /testimonials/) or an absolute path (ex: https://somewebsite.com/testimonials/). Regardless, it is important to follow the pattern of the surrounding nav items.

Example: Say you want to add a new link called “Shop” to the main nav, which already includes two links: “About Us” and “Testimonials”.

1. First, locate the main nav’s <ul> by searching the editor for “ul”, then confirm that it’s the correct <ul> by making sure it contains two <li>’s, “About Us” and “Testimonials”.

2. Next, copy and paste an existing <li> element into the list. Replace the name of the nav item, ensure all attributes match the existing, and update the <a>’s href.

<ul class=”menu”>
  <li class=”nav-item lp-btn”><a href=”/about-us/”>About Us</a></li>
  <li class=”nav-item lp-btn”><a href=”/testimonials/”>Testimonials</a></li>
  <li class=”nav-item lp-btn”><a href=”/shop/”>Shop</a></li>
</ul>

Subnav:

The process for adding a link to a subnav is similar, with one important difference– its structure. For example, say the “Shop” nav item from the previous example has a subnav with two links, “Men’s” and “Women’s”. It would have a structure like this:

<ul class=”menu”> <-- Main nav <ul>
   <li class=”nav-item”><a href=”/about-us/”>About Us</a></li>
  <li class=”nav-item”><a href=”/testimonials/”>Testimonials</a></li>
  <li class=”nav-item has-subnav”> <-- Main nav <li> with a subnav
      <a href=”/shop/”>Shop</a> <-- Main level nav <a> that holds nav item name
      <ul class=”subnav”> <-- Subnav <ul> with its own <li>’s
        <li class=”subnav-item”><a href=”/shop/mens/”>Men’s</a></li>
        <li class=”subnav-item”><a href=”/shop/womens/”>Women’s</a></li>
      </ul>
  </li>
</ul>

In this example, you would add your new subnav <li> to the innermost <ul> (the one with a class of “subnav”). Keep in mind that most subnavs will have a class of “subnav” (or similar), but some may not. Always confirm you’re editing the correct <ul> by checking that its existing <li>’s align with the subnav you want to add a link to.

Note: the “Shop” item’s <a> does NOT wrap the subnav <ul> – instead, they are “sibling elements” and are both contained by:

<li class=”nav-item has-subnav”></li>

Removing a Link from the Navigation

1. Search the editor for the link name you want to remove. It should be wrapped in <li> tags.
2. Remove the entire line, tags included. Be careful to only delete the tags of the item you want to remove, as accidentally removing an angle bracket that belongs to another nav item can break the template.
3. Use the up/down arrows next to the search bar to ensure there are no other instances of the link you want to remove. Sometimes mobile navs can be built separately, in which case you would want to make sure to remove the link in question in both the main nav <ul> and the mobile nav <ul>. Note: it is usually NOT the case that there separate <ul>’s for desktop and mobile navs, but it can happen, so it’s always good to double check.
4. Save the theme.

Changing the Order of Navigation Links

1. Search the editor for one of the link names you want to change the order of. It should be wrapped in <li> tags.
2. Copy (Ctrl + C or Command + C) the entire line (be sure to include all angle brackets and slashes). Paste (Ctrl + V or Command + V) the line where you want it.
   Note: confirm that it is still contained by a <ul> element.
3. Remove the original <li> so you don’t end up with duplicate nav items.
4. Use the up/down arrows next to the search bar to ensure there’s not another instance of the link name, and therefore another place where the order would need to be updated.
5. Save the theme.

Renaming Navigation Links

1. Search the editor for the link whose name you want to change. It should be wrapped in <li> tags.
2. Replace the text between the opening and closing <a> tags.
3. Ensure there are no other instances of the old name by using the up/down arrows next to the search bar.
4. Save the theme.