How to create Single Page website using twenty seventeen theme: Click on menus and it will scroll to the target/related content without refreshing

Single Page Website
Before i shared you CSS customization of Twenty Seventeen theme. Today I am sharing you how to create Single Page Website using Twenty Seventeen Theme.

In Single Page Website, when you will click on menus, it will go scrolling to the related point or content in homepage.

You can use my shared method and ask question in the comments section.

Or can take my personal help.

Here are the Steps.

1. Install Page Scroll to id plugins. This pluigns will help us to scroll  or go to the targetted / related content in homepage with an scrolling effect.

Page or Menu Scroll to Content

2. For simplicity lets assume  our  page will have   only 3 menus :   “Home”, “About” and “Contact”.  When Clicking on  “About” and  “Contact” menu it will scroll to About and Contact section in Homepage.

Single page menu


3.  Creating Pages for Single page Site in twenty Seventeen theme:

To Create the pages for single page website you have to wrap the  Title with   a little html   like the image attached

<span id=" any id you use">  </span>

Menu click and scroll to page


4.  Adding Created page in Menu to scroll

Click and scroll to content


5. How to show the Created page in Homepage in Twenty Seventeen Theme?

At  First go to   Appearance > Customize  and the   Twenty Seventeen theme Customiztion section will appear

Check the image attached how to add  About Us page  to show in homepage

First Step:


Twenty Seventeen theme option


2nd Step:

Add page in homepage twenty seventeen theme


Viola  you are done  🙂


now Click on  About Menu  and you will see   it is scrolling down and  showing the About us Content

If you have any issue feel free to ask me question here in comments section


Pay me some, I will help you for CSS Issue PersonallyCLICK HERE….

22 Responses to How to create Single Page website using twenty seventeen theme: Click on menus and it will scroll to the target/related content without refreshing

  1. mogrianne says:

    I like the information you have here but I am finding the links slide past where they should go. The seem to end halfway through the text section instead of opening to the top of the section. Thoughts?


  2. Mike Sealey says:

    Do you find that sites created with twentyseventeen have jumpy images when scrolling (with internet explorer and edge)?


  3. tauchners says:

    could you check on my site when using the second link the content is scrolling underneath the menu. please help.

    kiind regards, hubert


  4. tauchners says:

    What is fiverr ?


  5. Peter says:

    Thing is that when you have a single column selected (time options) the scroll passes the page title and scrolls directly to the page content…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: