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.

Full 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.

Step 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.

Step 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.

Anchor 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.

Full Screen Scrolling sections have its own challenges, and below is a list of some important things to keep in mind: