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 two main containers:
the viewport (OUTER-WRAP);
the moving container (WRAP).
This block together will produce the effect via javascript.
Many themes just wrap many parts of the page:
Header;
Main Content;
Footer.
This is an example of the HTML page with wrapper:
<body>
<div id="outer-wrap">
<div id="wrap">
<header id="site-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
</header><!-- #site-header -->
<main id="main">
... THIS IS THE PAGE CONTENT
</main><!-- #main -->
<footer id="footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
</footer><!-- #footer -->
</div><!-- #wrap -->
</div><!-- #outer-wrap -->
<body>
Hello Theme created by Elementor doesn't create it, so we need to create it.
First of all, it's necessary to consider the need to modify some theme files, to do it correctly we 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:
header.php
<?php
/**
* The template for displaying header.
*
* @package HelloElementor
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
$site_name = get_bloginfo( 'name' );
$tagline = get_bloginfo( 'description', 'display' );
?>
<!-- Open WRAPPERS -->
<div id="outer-wrap">
<div id="wrap">
<header class="site-header" role="banner">
<div class="site-branding">
<?php
if ( has_custom_logo() ) {
the_custom_logo();
} elseif ( $site_name ) {
?>
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( 'Home', 'hello-elementor' ); ?>" rel="home">
<?php echo esc_html( $site_name ); ?>
</a>
</h1>
<p class="site-description">
<?php
if ( $tagline ) {
echo esc_html( $tagline );
}
?>
</p>
<?php } ?>
</div>
<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
<nav class="site-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>
</nav>
<?php endif; ?>
</header>
footer.php
<?php
/**
* The template for displaying footer.
*
* @package HelloElementor
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
?>
<footer id="site-footer" class="site-footer" role="contentinfo">
<?php // footer. ?>
</footer>
<!-- Close WRAPPERS -->
</div>
</div>
IDs are customizable from the interface
