How to Setup One Page Navigation

This article was last updated on the January 2, 2017.

Setting up a one page navigation on your website takes no time at all with X, and now you can utilize this powerful feature on any page of your site! This means you can take advantage of this engaging effect for multiple product showcases, marketing squeeze pages, alternate home pages, and more.

Create Your Page

The first thing that you’ll need to do before anything else is actually create the page that you want to use your one page navigation on. You can do so with our built-in shortcodes, using the Visual Composer, or simply implementing your own custom markup on the page. The most important thing about creating your page is adding a unique ID to each element on the page that you want one of your navigation items to link to. If you’re using your own markup, it would look something like this:

<div id="services"> ... </div>

You can also easily add IDs to most of our shortcodes using the id attribute, like so:

[map id="contact"] ... [/map]

However, the easiest and best IDs to link to on your page are the ones automatically generated by our [content_band] shortcode (this is the same as adding a Row in Visual Composer). For every [content_band] shortcode you place on your page, each one will output an ID that increments based on its page position. For example, let’s say that you added three [content_band] shortcodes to your page:

[content_band] ... [/content_band]
[content_band] ... [/content_band]
[content_band] ... [/content_band]

This would output the following (simplified) markup:

<div id="x-content-band-1"> ... </div>
<div id="x-content-band-2"> ... </div>
<div id="x-content-band-3"> ... </div>

The other great thing about this is that it will automatically update your IDs for you if you input any additional [content_band] shortcodes. For example, if you added another one between the first and second bands above, the generated markup would look like this:

<div id="x-content-band-1"> ... </div>
<div id="x-content-band-2"> ... </div>
<div id="x-content-band-3"> ... </div>
<div id="x-content-band-4"> ... </div>

Make sure to keep this in mind as you link out to the IDs on your page as you will need to update your links depending on whether or not you add any new content.

If you are using Cornerstone, the generated markup you will be a little different as it does not use the now deprecated [content_band] shortcode and instead uses our new [x_section] shortcode, so the markup output would look like this:

<div id="x-section-1"> ... </div>
<div id="x-section-2"> ... </div>
<div id="x-section-3"> ... </div>

You can use these generated classes with Cornerstone to output your one page navigation just like before. The other nice benefit of Cornerstone’s sections is you can overwrite these generated IDs with your own, so you could make these a bit more semantic if desired. To do this, simply input an ID in your section’s ID input (if you don’t see these, go down to the middle button in the footer of the Cornerstone sidebar, click it, then turn on Advanced Controls so you can see these inputs).

Create Your Menu

After you have completed your page, the next step of the process is to create the menu that you will use on this page. To do so, go to Appearance > Menus in the WordPress admin panel. Once you are on this page, select the create a new menu link near the top of the page. Give your menu a name in the Menu Name field and select Create Menu. Once you have done this, you will be taken back to the main menu creation screen, where you will see a list of link options on the left hand side of the screen. You will likely see options to link to pages, posts, categories, and more, but the section that we want to focus on for now is the Links option.

Select the Links option and you will see two input fields, URL and Link Text.

The URL input is where we will place the link to our unique element IDs, and the Link Text input is simply the label you would like your navigation item to have. In keeping with our example above, let’s say that we want to link to our first [content_band] on our page. We know that the ID for this element is x-content-band-1, so we would enter the following into the URL input:
#x-content-band-1

The ID selector (#) is very important here as your link will not function correctly if you leave it off. You could continue this until you have linked to all four [content_band] shortcodes on your page. In doing so, you would have four links that would utilize these respective values in the URL input:

#x-content-band-1
#x-content-band-2
#x-content-band-3
#x-content-band-4

The class that is added and removed from each menu item as your user scrolls through your site is called current-menu-item. This class will be added to your links once a visitor scrolls to its corresponding element on the page. Depending on how you have your page setup, your first link might not have this “active” class applied to it right away. Should you want one of your links to display as “active” when a visitor first loads your page, you can add the current-menu-item class to one of your links. To do so, click on Screen Options in the upper right corner of the Menus page and ensure that CSS Classes is selected underneath Show advanced menu properties. Next, go down to the link in your menu that you want to add your class to and click on it to expand it. Once your link item is expanded, you should see an input field labeled CSS Classes (optional). Simply input the current-menu-item class here and your link will show as “active” when a visitor first loads your page.

Finally, you can still add normal links to your one page navigation if you’d like, as well as dropdowns. This leaves things very flexible and allows you to setup your navigation exactly how you want. This works really great if you’re wanting to split test two different homepage designs with different amounts of content on the page, but you want both of them to have a link out to your blog page as well.

Add Your Menu to Your Page

The last step in your journey to one page navigation is to assign your menu to a page. To do so, find the page you want by selecting Pages in the WordPress admin area. This will bring up a list of pages that you have created. Locate the page you want and click the title so that you can go through to the edit screen. Below the editor you will see a meta box labeled Page Settings. Inside that meta box there is a setting called One Page Navigation with a select dropdown to the right. This dropdown will feature every menu you create. Simply locate the menu that you just created, select it, and then click the Update button on your page to save your changes. Should you choose to turn off the one page navigation for this page at a later date, simply set the dropdown back to Deactivated and your Primary menu will take its place.

Special Considerations

Take note that no matter the global navbar settings for your site (i.e. the settings you have selected in the Customizer), activating one page navigation on any page will cause the menu to become Fixed Top for that page due to the special requirements of this functionality. For example, if you happen to have Static Top, Fixed Left, or Fixed Right selected in the Customizer, activating a one page navigation on any page will make only that page’s navigation behavior switch to Fixed Top. This is necessary for the one page navigation to function correctly and should be considered when setting up your site and when wanting to use the one page navigation feature.

Due to certain developmental implementations in the Revolution Slider plugin, utilizing a Full Screen slider along with the one page navigation could create issues. This is due to the way that Revolution Slider dynamically calculates the height of these sliders with JavaScript once the page loads. Because of this, the dynamic height set for the slider throws off the calculations set in place by the one page navigation and could potentially cause the wrong section to be highlighted as you scroll through the page. We have implemented a workaround for this in the theme that should help to circumvent this issue put in place by the plugin, but definitely make sure to be aware that this could potentially be a situation you might run into.