Full Screen Scrolling Sections

Full Screen Scrolling Sections

23/07/2018

Introduced in Avada 5.3 is the new Full Screen scrolling section with a side navigation that you can set up to a create a beautiful One Page scrolling website or simply added into any page/post as part of your page content. which provides users a simple and fast scroll navigation. Please continue reading below to know more about this feature.

Overview

Full Screen Scrolling Sections

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.

How To Set Up 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. If you enable 5 containers and the 6th is not set to 100% Height = Yes and Enable 100% Height Scroll = Yes, you will need to start a new group.

How To Customize The Scrolling Navigation

Step 1 - Navigate to Avada > Theme Options > Fusion Builder Elements > Container Element.

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 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 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 customizations does fall outside the scope of our support. Please check this for more information.

Copy to Clipboard

Anchor Scrolling With 100% Height Scrolling Sections

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.

Click Here To Learn More About Anchor Scrolling

Things To Keep In Mind When Using Full Screen Scrolling Sections

Full Screen Scrolling section has its own challenges, 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 Theme Options > Fusion Builder Elements > Container Element 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.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept