Greetings to all who stumble upon this post!
Hello, I have been diligently working on a React application and am eager to integrate a Bootstrap template. However, everything seems to be in order except for the responsiveness of the template. It lacks animation and is purely aesthetic.
Here is a working index example with animation when scrolling down: animation when scroll down
And here is an example of the same template not working properly within a React component: animation not working
The code for the index page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<!-- Favicon -->
<link rel="icon" href="img/core-img/favicon.ico">
<!-- Core Stylesheet -->
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">
<!-- ##### All Javascript Script ##### -->
<!-- jQuery-2.2.4 js -->
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script src="js/bootstrap/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- All Plugins js -->
<script src="js/plugins/plugins.js"></script>
<!-- Active js -->
<script src="js/active.js"></script>
</body>
</html>
As for the code for Header.js:
import React, { Component } from 'react'
import '../App.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
export default class Header extends Component {
render() {
return (
<div>
{/* ##### Header Area Start ##### */}
<header className="header-area">
{/* Navbar Area */}
<div className="palatin-main-menu">
<div className="classy-nav-container breakpoint-off">
<div className="container">
{/* Menu */}
<nav className="classy-navbar justify-content-between" id="palatinNav">
{/* Nav brand */}
<a href="index.html" className="nav-brand"><img src="img/core-img/logo.png" alt /></a>
{/* Navbar Toggler */}
<div className="classy-navbar-toggler">
<span className="navbarToggler"><span /><span /><span /></span>
</div>
{/* Menu */}
<div className="classy-menu">
{/* close btn */}
<div className="classycloseIcon">
<div className="cross-wrap"><span className="top" /><span className="bottom" /></div>
</div>
{/* Nav Start */}
<div className="classynav">
<ul>
<li className="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="#">Pages</a>
<ul className="dropdown">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
...
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
I'm looking for advice on what changes to make or which additional installations are needed.
So far, I've already run "npm install bootstrap", "react-router-dom", and "npm install node-sass". Any tips or ideas would be greatly appreciated as my creativity well is running dry. Thank you in advance!