Join us to celebrate 4th Birthday & Grab 30% discounts on Unlimited plans


One Page Navigation

How to Configure and Style EA One Page Navigation #

EA One Page Navigation gives you the flexibility to easily navigate through your one page website. With the help of this element, you can create a beautiful one page site and improve the overall user experience.

How to Activate One Page Navigation #

To use this Essential Addons element, find the ‘EA One Page Navigation’ from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘One Page Navigation’ into the ‘Drag widget here’ section.

One Page Navigation
Initially, this is how One Page Navigation would look like:

One Page Navigation

 How to Configure the Content Settings #

Under the ‘Content’ tab you will find the ‘Navigation Dots’ & ‘Settings’ section.

Navigation Dots

In this section, you can add a Section Title, Section ID & use the dropdown menu to choose an for the navigation dot.

One Page Navigation


You can use the toggle bars to Tooltip, Tooltip Arrow, Scroll Wheel and few other options. You can also change the Scrolling speed of your page navigation from this section.

One Page Navigation

 How to add Section ID for each Section #

To add Section ID, click on the Section you want to modify.

One Page Navigation

Then head over to the ‘Advanced’ tab of that particular Section. Simply add the ‘Section ID’ of the navigation dots inside the CSS ID field.

One Page Navigation

Click to See Live Demo #

How to Style One Page Navigation #

From the Style’ tab, you can modify Alignment, Color, Size, Spacing, Tooltip and many more options of the One Page Navigation.

Navigation Box

For the ‘Navigation Box’ section, you are capable of changing the alignment and background type. You can even add styling to border as well.

One Page Navigation

Navigation Dots

From this section, you can change the size and spacing of the Navigation Dots. If you want, you can even add ‘Box Shadow’ as well. Moreover, you are able to separately control the styling for ‘Navigation Dots’ when its in normal, hover or active view.

One Page Navigation


You are able to change the background & text color of your Tooltip. From this section, you can change the ‘Typography’ of your Tooltip content as well.

One Page Navigation

 Final Outcome

Once you are done with the basic steps, you can design One Page Navigation as per your preference.

One Page Navigation

With the help of EA One Page Navigation, this is how you can enhance the user experience on your site with the easier navigation panel.

Getting stuck? Feel to Contact Our Support for further assistance.

Get Started Now

Powered by BetterDocs

Win With Elementor!

It’s easy: all we need is your eternal love. But we’ll settle for your email.