For the correct creation and construction of Smooth navigation, some containers to move the elements on page scrolling are needed.
The structure is based on 2 main containers:
the viewport (OUTER-WRAP);
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.
You can insert the wrapper of the Header, Main, and Footer elements in the element's Hello Theme by writing this code in the functions.php file of your theme child.
function mytheme_wrapper_open() {
echo '<div id="outer-wrap"><div id="wrap">';
}
add_action( 'wp_body_open', 'mytheme_wrapper_open' );
function mytheme_wrapper_close() {
echo '</div></div>';
}
add_action( 'wp_footer', 'mytheme_wrapper_close' );