How To Use Full Screen Scrolling Sections

Full Screen scrolling sections were introduced back in Avada 5.3, and offer you a way to combine multiple full height containers into full screen scrolling sections with side navigation. With this tool, you can set up a beautiful one page scrolling website or you can simply add them into any page/post as part of your page content.
See an example below of full screen scrolling sections from the Avada Adventure website. Note the navigational dots along the right hand side. Please continue reading below to know more about this awesome feature.
Check Out the Adventure website!Overview
Full Screen Scrolling Sections: A step-by-step guide on how to use and set up full screen scrolling sections.
How To Customize The Scrolling Navigation: This covers how to customize the scrolling navigation.Anchor Scrolling with 100% Height Scrolling Sections: Information about anchor scrolling with 100% height scrolling sections.
Things To Keep In Mind When Using Full Screen Scrolling Sections: Understand the important drawbacks or disadvantages of using full screen scrolling sections.
Full Screen Scrolling SectionsFull Screen Scrolling or 100% Height Scrolling can be activated via Container Settings. You will need at least 2 consecutive containers that are 100% Height Scroll enabled for this to work. Please follow the steps below to set up your full screen scrolling sections.
How To Set Up Full Screen Scrolling SectionsStep 1 – Open the Container Settings and navigate to General tab.
Step 2 – Set 『100% Height』 option to Yes. 『Enable 100% Height Scroll』 option will show up and set this to Yes.
Step 3 – Save the container.
Step 4 – Follow steps 1-3 for the other containers that you will include in the scrolling section group.
Note: You can set up more than one Full Screen Scrolling section within a page/post. It requires 2+ consecutive containers to form a group that will scroll.
How To Customize The Scrolling NavigationStep 1 – Navigate to Avada > Options > Avada Builder Elements > Container.
Step 2 – Set your preferred colors for 『Container 100% Height Navigation Background Color』 and 『Container 100% Height Navigation Element Color』 options.
Step 3 – Choose if you want to enable or disable 『Container 100% Height On Mobile』 option.
Note: This feature works best when your containers have minimal content. If the container has a lot of content it will overflow the screen height. In many cases, 100% height containers work well on desktop and generally should be disabled on mobile.
Step 4 – Click 『Save Changes』 button.
Note: If you want to change the size of the navigation bullets, for example, please try to use the CSS snippet code below, adjusting the values for the height and width as required. Further customization falls outside the scope of our support. Please see our Theme Customization page for more information.
Copy to Clipboard.fusion-scroll-section-link-bullet {
height: 12px;
width: 12px;
} 1.fusion-scroll-section-link-bullet {2    height: 12px;3    width: 12px;4}Anchor Scrolling With 100% Height Scrolling SectionsAnchor Scrolling is possible with Full Screen or 100% Height scrolling sections. Please click the button below for the detailed documentation on how to set up Anchor Scrolling.
Click Here To Learn More About Anchor ScrollingThings To Keep In Mind When Using Full Screen Scrolling SectionsFull Screen Scrolling sections have its own challenges, and below is a list of some important things to keep in mind:
All content of the scrolling section must fit into the 100% viewport height. Otherwise, if the content is too large, it will be cut off.Mobile Devices are shorter in height so the 『Container 100% Height On Mobile』 option, found on Options > Avada Builder Elements > Container section, can be disabled. The 『Container 100% Height On Mobile』 feature only works when your containers have minimal content. If the container has a lot of content it will overflow the screen height. In many cases, 100% height containers work well on desktop, but will need disabled on mobile.『Mobile Visibility』 or 『Container Visibility』 settings will be disabled. This option will be hidden when 『100% Height』 option is set to Yes.