For the correct creation and construction of a Smooth navigation, some containers to move the elements on page scrolling are needed.

The structure is based on 2 main containers:

  1. the viewport (OUTER-WRAP);

  2. the moving container (WRAP).

This block together will produce the effect via javascript.

Many good themes just wrap many parts of the page:

  • Header;

  • Main Content;

  • Footer.

This is an example of the HTML page with wrapper:


Hello Theme created by Elementor doesn't create it, so we need to create them.

First of all, it's necessary to consider the need to modify some theme files, to do it correctly I recommend you to create a theme-child, like all themes and also Elementor recommends, you can read some indications here:

First of all, override the files dedicated to the header and footer which constitute the opening and closing of the page.

Copy the structure of Hello-Theme starting from the folder [template-parts] which will contain inside:

  • template-parts > header.php;

  • template-parts > footer.php.

in your theme-child.

In the files add the tags related to the 2 wrappers, which in the end will simply look like this:


'menu-1' ) ); ?>


IDs are customizable from the interface:

Did this answer your question?