Creating A Local Scroll Menu

This theme will allow you to easily create a local scrolling menu by simply assigning a specific classname to your menu items to create a smooth animation as well as position your fixed header perfectly during the local scroll.

Create Rows With Custom Local Scroll ID’s Using The Visual Composer

On the page that you want to add local scroll to, add a row and click the pencil icon on the top right of the row to edit it. Then in the Local Scroll ID field add a unique ID for this section. This unique id should not have any spaces but you can use numbers, under-scores and dashes.

Important: Do NOT add the # symbol to your ID, it isn’t necessary, just give it a unique name. Do not use spaces, only use dashes and underscores.

total-local-scroll-id

Notice: By using the Local Scroll ID the theme will add the ID as a data attribute to the row. This allows the theme to create the local scroll animation even when linking directly from another page.

Create or Update An Existing WordPress Menu

Create a new menu or update an existing menu (Appearance > Menus) and add custom links for each menu item. Add the link link with the class “local-scroll” and with a URL that is # symbol followed by the div ID you are linking to (this is the name given in the “Local Scroll Id” field in your Visual Composer Row).

You can enter the url as simply “#section-one” or with the full URL “http://www.site.com/#section-1” if you want the menu item to be clickable from other pages of the site.

total-local-scroll-menu

Don’t See The “CSS Classes” field in your menu dashboard? No Problem, simply click on “screen options” on the top right of your menu dashboard to enable this field.

Adding The Local Scroll Menu To Your Site

You have 2 main options for adding the menu to your site via the built-in theme functions which are mentioned below:

1. Adding A Local Scroll Menu Site-Wide To The Site Header

The first option is to display your menu inside the main theme’s header which can be done by simply assigning the menu to the “Main” menu location as mentioned in the docs here. And of course, make sure that your header is enabled on the site otherwise you won’t be able to see it.

2. Adding A Local Scroll Menu Inside A Page

If you are looking to create a local scroll menu outside the scope of a defined menu region such as the Top Bar or Header menu you can use the Total “Navigation Bar” module to insert any custom WordPress menu on a page.

Custom Local Scroll Header Menu For Just One Page?

If you want a page with a local menu that you created only for that specific page and keep your normal header menu on all of your other pages you can do so by selecting it under the page settings. This can be useful for landing pages that are not a “part” of the “standard” site.

Select Your Local Menu