Converting HTML site into a React app CSS question

I am very new to React and am attempting to convert a pre-made HTML site into a React app. I have converted over most of the functionality that I want, however I am missing the CSS effects on the nav-bar of the app.

The original HTML behavior has the nav-bar stay at the top of the screen and change color to add contrast when you scroll down, and when you click on a link in it, it smoothly scrolls you to that location. However, after converting, the nav-bar does not stay at the top of the screen and it instantly takes you to a location when clicked.

As far as I can tell, all of the CSS has been referenced correctly (based on the colors, locations of elements, etc), so I am at a loss on where to go from here. Any advice would be much appreciated!

Here is the code for the nav-bar React component:

import React, { Component } from 'react'

export default class TopNavBar extends Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg site-navbar navbar-light bg-light" id="pb-navbar">
        <div className="container">
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse justify-content-md-center" id="navbarsExample09">
            <ul className="navbar-nav">
              <li className="nav-item"><a className="nav-link" href="#section-home">Home</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-resume">Resume</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-about">About</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
    )
  }
}