Setting Up Your Vantage Menus

David

8 years ago

Vantage 4.0 uses three different menus Two for the top main navigation. One in the footer for social icons.

On new installs, your menus should already be setup correctly. If not, follow this tutorial on how to manually set it up.

Confirm Menus Are Setup

When you view your website, you should see the following menu locations setup. The actual menu items might be different but there should at least be some menus shown.

If not, you’ll need to manually create three new empty menus (Primary, Secondary, and Footer).

Go to “Appearance” => “Menus” => “create a new menu”
Give the menu a name
Repeat until all three empty menus are created

Assign Menu Location

Go to “Appearance” => “Menus” => “Manage Locations”
Select the correct assigned menu for each menu (see screenshot
Save changes

Setup Primary Menu

Now it’s time to add content to your primary menu. These are basically links to other pages on your site.

In the above screenshot, you’ll see two menu items. “Create Listing” and a dropdown for the user logged in. If the user wasn’t logged in, you’d see “Login” and “Register” button (if registration is enabled. As of version 4.0.0, you cannot customize or move the login/register or user dropdown elements.

Let’s add the “Create Listing” link.

Click on the “Edit Menus” tab
Select “Primary (Primary Menu)” from the “Select a menu to edit” dropdown
Click the “Select” button
In the “Pages” panel, click the “View All” tab
Scroll down and tick the “Create Listing” option
Click the “Add to Menu” button
Click the “Save Menu” button

Pro tip: Vantage 4.0 includes Font Awesome so you can easily embed any icon from their collection. On our demo site, we use the plus icon before the text. Copy and paste the snippet below into your menu’s Navigation Label.

<i class="fa fa-plus"></i> Create Listing

Setup Secondary Menu

Now it’s time to add content to your secondary menu. This is basically your main site navigation.

You can add whatever pages you like here. See the screenshot for the pages our demo site uses.

We basically follow the same steps as above.

Click on the “Edit Menus” tab
Select “Secondary (Secondary Menu)” from the “Select a menu to edit” dropdown
Click the “Select” button
Expand the “Pages” panel, click the “View All” tab
Scroll down and tick a page to use
Click the “Add to Menu” button
Click the “Save Menu” button

Note: The categories page uses a shortcode to generate a list of all listing categories and build the dropdown menu. If the page is empty, you’ll need to add the shortcode. See this tutorial on how to add it.

Setup Footer Menu

The last menu is the footer which contains the social media icons. They aren’t actual pages so we need to create “Custom Links” instead.

Let’s add a custom link for Twitter.

Click on the “Edit Menus” tab
Select “Footer (Footer Menu)” from the “Select a menu to edit” dropdown
Click the “Select” button
Expand the “Custom Links” panel
Enter the social media URL (e.g. https://twitter.com/)

Enter the Navigation Label

<i class="fa fa-twitter" aria-hidden="true"></i>

Click the “Add to Menu” button
Click the “Save Menu” button

Repeat all steps again for each and every social media icon you wish to add. To save you time, here’s a list of what we use on our demo site.

https://www.facebook.com/
<i class="fa fa-facebook" aria-hidden="true"></i>
 
https://plus.google.com/
<i class="fa fa-google-plus" aria-hidden="true"></i>
 
https://www.instagram.com/
<i class="fa fa-instagram" aria-hidden="true"></i>
 
https://www.linkedin.com/
<i class="fa fa-linkedin" aria-hidden="true"></i>

Note: Don’t forget to replace each url with your own personal url.

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.

Your rating: none

Rating: 4.8 - 4 votes