How To Make A Scrolling Menu

Michael Oldborn

What is scrolling Menu ? How is it done ?

One-page menu type ( scrolling menu ) has always been populer in WordPress, as it fits many business modals. From people who want to sell something online to the corporate firms use one-page themes mostly. One of the most important features of the one-page theme is to able to scrolling between menu items on the homepage and this is why the onepage menu is chosen by the majority.

What Is Scrolling Menu?

Scrolling menu can be defined as a mechanism that allows scrolling between sections on the same page, as you click on the menu items on header. To give an example, lets say you have a About section on your homepage and you have a about menu item on header. Scrolling menu allows you to scrolling down to the About section smootly as you click on the about menu item on header.

 

In this article, we’re going to cover this case with additional screenshots and videos in details.

How Scrolling Menu Is Done?

We’re going to take our Landium WordPres theme as example to provide you some screenshots to make this point clear.

Screenshot 1
How to make Scrolling Menu

As seen in Screenshot 2 click on the ” edit page ” to go to backend editor, where you add your menu items.

Screenshot 2
How to make Scrolling Menu

You’ll see a meta box menu on the right side of your homepage in the backend editor.

Screenshot 3
How to make Scrolling Menu

As you can in Screenshot 4, you should put a unique Row id to each row section. The id can be anything you like but must be unique. We added an id ” home ” for the home section.

Screenshot 4
How to make Scrolling Menu

 

Using the same method as we did in screenshot 4, we’re going to add another row id for the service section in Screenshot 5

Screenshot 5
How to make Scrolling Menu

 

This is the same for any section you have on your website.

NOTICE: Now, we’re going to add a section using the default elements of WPBakery Paege Builder and we’ll use the ” Google Maps  ” element.

Screenshot 6
How to make Scrolling Menu
Screenshot 7
How to make Scrolling Menu

As we did in the previous sections, we’ll add a uniue id for the google maps section.

Now, it is time to add those uniqu row id to menu item url, where you can see on the right side of your homepage in backend. You put any name in the ” menu item name ” field but you have to make sure you added the same id in the ” menu item url ” field.

Screenshot 8
How to make Scrolling Menu
Screenshot 9
How to make Scrolling Menu

We’ve created three sections but you can easly add as many different sections as you want by following these steps.

Screenshot 10
How to make Scrolling Menu

After making your changes, save and update your page.

Screenshot 11
How to make Scrolling Menu
Screenshot 12
How to make Scrolling Menu

We’ve also took a video on this case. You may also watch the following video to follow those steps.

Do you want to check out our ThemeForest Profile? Click here to visit our profile and see our other WordPress themes.

Please also do not forget to subscribe our Youtube Channnel.

Leave a Reply

Your email address will not be published. Required fields are marked *

Archives