Editing a Menu Bar

In this tutorial, we are going to teach you how to edit a menu bar.
A menu bar is a collection of hyperlink elements that are grouped horizontally and acts as one of a site's navigational aide (another navigational aide is a site menu). It's similar to a site menu in terms of function, but unlike a site menu, the hyperlink elements inside a menu bar can include icons or images with them. This makes the menu bar aesthetically pleasing compared to a site menu.

For this tutorial, we use an example site that uses the Detroit theme. Possibly, your website is utilizing a different site theme, and it may or may not have a menu bar yet. Even if it does, it might look different than the one portrayed in our example. This is not a problem as almost all menu bars look the same, and they're relatively easy to recognize.

To give you an idea of what a menu bar looks like, below are a few example screenshots of them.

Menu bar example #1

Menu bar example #2

Menu bar example #3

Menu bar example #4

The key to recognizing a menu bar is the horizontal grouping of its hyperlink elements. It looks similar to a site menu, but it has icons or images in each of its links. Our example menu bar screenshots show precisely that. All of their hyperlink elements are arranged horizontally.

From this point on, we'll use the word "links" to refer to hyperlinks or hyperlink elements.

Once you've got your new site created, edit it so that you can work on it using the Site Builder page. Scroll down until you see a section that horizontally groups a strip of labels or buttons with icons or images on top of them. This is the menu bar, as provided in the Detroit theme.

Now, to begin editing the menu bar, click on one of its links. To follow, click the "Apply For Credit" link. The "Property editor" then appears, and this is where you start editing the properties and behavior of each link of a menu bar.

As shown in the "Property editor", here are the properties and behavior of a link that you can modify:
  1. link text - This is the text that labels the link.
  2. link to - Where do you want the link to point or redirect to when it is clicked? The options are:
    • Standard Page - Link to any internal page within site;
    • External Website - Link to an external website or source (outside the site);
    • Vehicle Type - Link to the Inventory page using the vehicle type;
    • Category
  3. An icon list where you can select the icon to represent your link.

Let's edit the properties of the link in this order:
  1. Change the link text to "Visit our Blog".
  2. For the "link to" property, choose "Standard Page" and select "Blog".
  3. For the link image, pick any icon you want.
  4. Click "Apply Changes" to update the properties of the link. The changes are reflected instantly. 

Click "Save" on the top-right corner to rebuild your site. This ensures that your changes are persisted and prepares it for preview and testing.

To preview and test your changes, click "Preview Site". It's located on the left of "Save". A new window opens so that you can review and test your site.

Now, on the preview window, locate the menu bar link you've just edited. Its text must now be "Visit Our Blog," and if you click it, it should point you to the Blog page of the site.

Finally, if you are happy with your changes and want to push them to your live site, go back to the Site Builder page and click "Publish".

This concludes the tutorial on how to edit a menu bar. Keep in mind that you're actually modifying the items or links contained in a menu bar. The menu bar simply groups these links together as one unit.

Still need help? Contact Us Contact Us