How do I implement custom JS into my wordpress theme (Understrap)?

Question

I want to use custom JS to help me create a sticky navbar located directly under my header. I want it so that the navbar goes to the top of the webpage when it is scrolled to. I also want the header to disappear as i scroll towards my navbar. I do not know where to put my js to make this happen. I am using the Understrap theme files from wordpress. https://github.com/understrap/understrap This is the link to the theme files for reference. If you go to sass/theme/_theme.scss the custom code i have is as follows:

body{
font-family: 'Nunito', sans-serif;
}

#wrapper-navbar{
  .top-header-holder{
    background-color:#fff;
    height: 260px;
    overflow: hidden;
    width: 100%;
    
}
#main-nav{
    border-top: 1px solid rgba($color: #194d7e, $alpha: 1.0);
    border-bottom: 1px solid rgba($color: #194d7e, $alpha: 1.0);
    margin-top: 260px;
    padding: 0px;
    top:0;
    z-index: 100;
    position: fixed;
    width: 100%;
    ul{
        flex: 1;
        justify-content: space-between;
        li{
            a{
                font-weight: 500;
                font-size: 24px;
                text-transform: uppercase;
                padding: 1.5em, 0.5em;
            }
            &.current_page_item{
                a{
                    color: #52b848;
                }
            }
        }
    }
}
}


   .home-banner{
   height: 1080px;
   background: #fff;
   background-image: url(../img/homepage1.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: right bottom;
   margin-left: 290px;
   margin-top: -400px;
 }

Additionally, if you go to header.php I have manipulated a few things as follows:

  <?php
  /**
  * The header for our theme
  *
  * Displays all of the <head> section and everything up till <div id="content">
  *
  * @package UnderStrap
  */

 // Exit if accessed directly.
 defined( 'ABSPATH' ) || exit;

$container = get_theme_mod( 'understrap_container_type' );
  ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- 
 fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" 
 rel="stylesheet">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?> <?php understrap_body_attributes(); ?>>
<?php do_action( 'wp_body_open' ); ?>


<div class="site" id="page">

<!-- ******************* The Navbar Area ******************* -->

<div id="wrapper-navbar">
<div class="top-header-holder"></div>

    <a class="skip-link sr-only sr-only-focusable" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
    
    <nav id="main-nav" class="navbar navbar-expand-lg" aria-labelledby="main-nav-label">
    
    
        <h2 id="main-nav-label" class="sr-only">
            <?php esc_html_e( 'Main Navigation', 'understrap' ); ?>
        </h2>
        
        <div class="container">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- The WordPress Menu goes here -->
            <?php
            wp_nav_menu(
                array(
                    'theme_location'  => 'primary',
                    'container_class' => 'collapse navbar-collapse',
                    'container_id'    => 'navbarNavDropdown',
                    'menu_class'      => 'navbar-nav',
                    'fallback_cb'     => '',
                    'menu_id'         => 'main-menu',
                    'depth'           => 2,
                    'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
                )
            );
            ?>
        <?php if ( 'container' === $container ) : ?>
        </div><!-- .container -->
        <?php endif; ?>

    </nav><!-- .site-navigation -->

</div><!-- #wrapper-navbar end -->

I assume i have to make changes to the functions.php folder, but i do not know exactly how to format it. I have never worked with js before. I appreciate any and all help with this.

Answer 1

You have a few options, I think this is the best:

Create a .js file
Add your script and save .js file
Upload .js file to js folder
enqueue your js in the function file
function wpb_adding_scripts() { wp_register_script('yourjs_script', get_template_directory_uri() . '/js/yourjsfile.js', array('jquery'),'1.1', true); wp_enqueue_script('yourjs_script'); }

How do I implement custom JS into my wordpress theme (Understrap)?

Question

1 answers

solution1
0 2021-07-21 19:28:58

How do I implement custom JS into my wordpress theme (Understrap)?

Question

1 answers

solution1 0 2021-07-21 19:28:58

solution1
0 2021-07-21 19:28:58