1. Home
  2. Docs
  3. Happy Elementor Addons P...
  4. Premium Widgets
  5. One Page Navigation

One Page Navigation

The new One Page Navigation widget of Happy Addons Pro will add an extra dimension to your website. You can easily navigate your one-page content effortlessly using some exclusive One Page Navigation designs.


To use that stunning One Page Navigation widget, you need the following things:

  • Elementor
  • Happy Addons
  • Happy Addons Pro

How To Use One Page Navigation

Let’s get into deep and exploring the following steps one by one:

Step: 1

Select the ‘One Page Nav‘ widget from the left sidebar menu. Then drag and drop it onto the selected area.

Add one page navigation

Step: 2

Under Content, you can find the navigation content editing options like Navigation, Tooltip, Settings, and Wrapper Link.

Content of one page navigation

In the Content–>Navigation, you can set Navigation Style and add Navigation List Items. Define the Horizontal Align, and Vertical Align position the navigation. Here is the Navigation Style list for you.

  • Default
  • Berta
  • Hagos
  • Magool
  • Maxamed
  • Shamso
  • Ubax
  • Xusni
  • Zahi
Content navigation

Let’s create one-page navigation using the Items–> Section Id and Advanced–>CSS Id. You can also use different names to set the navigation. But make sure the name of the Section Id and the CSS ID must be the same.

Add Section ID

If you choose the Navigation Style ‘Default‘, you only able to add Icons in the navigation items.

Add icon

You can also set the Tooltip in the Default style only. First, you have to enable the Tooltip option.

Note: The Tooltip will work on all devices. Here we’ve used a mobile device to show how Tooltip works.

Content Tooltip

Then you can add a Tooltip Title. Here we show you how.

Tooltip Title

Besides, you can show the Tooltip Arrow. To do this, you need to remove the Tooltip Title from the Items. Then it’ll automatically show the Tooltip Arrow.

Tooltip Arrow

In the Content–>Settings, you may define the navigation controller such as Scroll Wheel, Touch Swipe, Scroll Keys. And you can set Row To Offset (px), and Scrolling Speed (px) as well.

Content settings

Note: Remember the Touch Swipe will work only for the Mobile.

Step: 3

There are different styling options available in the Style section according to the Navigation Style. That’s why we will show you each and every styling option based on the different Navigation Styles.


When you select the ‘Default‘ navigation style, you will have the three main style options like Navigation, Navigation Content, and Tooltip.

Default Style one page navigation

You can easily design the navigation using Margin, Padding, Border Type, Border Radius, Box Shadow, Background Type, and Image.

Default Style Navigation

You are able to redesign the Navigation Content. These are options Icons Size, Space Between Icon & Title, Space between nav, Padding, Border Type, Border Radius, Box Shadow, Typography, Color, and Background Color to style the navigation content.

Default Style Navigation Content

If you need, you will change the Padding, Typography, Color, Background Color, and Border Radius of the Tooltip.

Default Style Tooltip


If you select the Navigation Style ‘Berta‘, you’ll get two style options Navigation and Navigation Content.

Note: Except for the Default Navigation Style, you can set the Margin of the navigator. By default, we’ve set the Margin 30px.

Berta Style Navigation

In the Berta style, you can design the Navigation Content in your own style. Here you can set Space between nav, add Typography, and define the Background Color.

Berta Style Navigation Content


Hagos is another cool navigation style. If you want, you may change its styles such as Icons Size, Space Between Icon & Title, Space between nav, Typography, and Background Color.

Hagos Style


These are the options Icons Size, Space between nav, and Color for changing the style of Magool navigation.

Magool Style


You are also able to edit the style of Maxamed. For example, define the Icons Size, Space Between Icon & Title, Space between nav. And change the Typography and Background Color.

Maxamed Style


Like the Maxamed, you can define the Icons Size, Space Between Icon & Title, Space between nav. And change the Typography and Background Color of the Shamso style.

Shamso Style


Same goes for the Ubax style.

Ubax Style


If you need to change the Xusni style, you can use these options Space Between Icon & Title, Space between nav, Typography, and Background Color to do so.

Xusni Style


Space Between Icon & Title, Space between nav, Typography, Color and Background Color can change in the Zahi style.

Zahi Style

Final Style: Let’s style our one page navigation.

Final Style

Note: If you want to display the nav at the very top of the website’s content, you must increase the Z-Index. Here is the guide.


Step: 4

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Give a read to this Document to know more about advanced features & functions.

Advanced setting of one page navigation

Here is the final preview of One Page Navigation widget.

Final preview of one page navigation

That’s it.

How can we help?