Guide: Create a One Page Site

Last Updated: Jan 08, 2018
Note: These 'hacks' are done at your own risk and we are not able to provide support for them. Please do not use these unless you have some level of comfort with coding.

This guide will walk you through creating a single page website, which will allow your menu items to scroll down the page to each section, instead of to a different page.

1. Try to complete your page as much as possible, because if you change things after setting this up, there could be issues.

2. After you have added all of your sections to your page, in the Content Editor, drag a new Text Module above the first section that you want the menu to scroll to.

3. In the Text Module, type the name of the section (ex. #services), then click on the <> button to view the source.

4. The source code should be:


You will want to add the anchor ID here, so your code will become:

<p id="services">#services</p>

Then you will also add a span so that we can hide the text from displaying on the page, so the source code will then become:

<p id="services"><span class="hide-anchor">#services</span></p>

Click OK and the check mark to be done editing the text. Save/publish your page.

5. Go to Advanced > Edit Custom CSS. Add the following CSS to hide the anchor text:

span.hide-anchor {
    display: none;

Click Save on the CSS editor and Save on the Customize page.

6. Go to Advanced > Navigations. Click the Edit button on your menu. Go to the Menu tab > Edit Menu Items > Add Menu Item.

Use these options:
Link Type: Custom
Title: Services
Link: #services

Notice how the link (#services) matches the ID on the anchor on the page. Click Add Item, then Save to save your changes.

7. Repeat these steps for the rest of the sections / menu items you will have.

8. If you'd like to make the scrolling smooth, you can add the following jQuery to Customize > Advanced > Edit JavaScript:

(function($) {
$(document).on('click', 'a[href^="#"]', function(e) {
    var id = $(this).attr('href');
    var $id = $(id);
    if ($id.length === 0) {
    var pos = $id.offset().top;
    $('body, html').animate({scrollTop: pos});
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found