When I attempt to add my "About Us" page link to the Navbar and include it in app.jsx
, the home page ends up getting mixed up and becomes a bit messy. Specifically, when I don’t add the Navbar links, everything works perfectly fine. However, when I try to include, for example, the "About Us" link within the Home section of the Navbar, I encounter an issue where the styles for the About page overlap with those of the Home page.
NAVBAR Image please Refer this Image for your reference
Home Page Image Look at this Image This is the site which I want when I add the aboutUs page in the navbar
but when I add or route the about us page in the App.jsx my homepage get’s distorted like this
Distorted Home Page Image This is how the iamge looks like When I add the AboutUs in the Route
Here is the code for both
Navbar.jsx
import React, { useEffect, useState } from 'react';
import './Navbar.css'; // Import the CSS file
import gsap from 'gsap'; // Make sure gsap is installed and imported
import { Link, useLocation } from 'react-router-dom';
const Navbar = () => {
const location = useLocation();
const [menu, setMenu] = useState(location.pathname);
useEffect(() => {
const nav = document.querySelector('nav');
const handleMouseEnter = () => {
let tl = gsap.timeline();
tl.to("#nav-bottom", {
height: "21vh",
duration: 0.5
})
.to(".nav-part2 h5", {
display: "block",
duration: 0.1
})
.to(".nav-part2 h5 span", {
y: 0,
stagger: {
amount: 0.5
}
});
};
const handleMouseLeave = () => {
let tl = gsap.timeline();
tl.to(".nav-part2 h5 span", {
y: 25,
stagger: {
amount: 0.2
}
})
.to(".nav-part2 h5", {
display: "none",
duration: 0.1
})
.to("#nav-bottom", {
height: 0,
duration: 0.2
});
};
nav.addEventListener('mouseenter', handleMouseEnter);
nav.addEventListener('mouseleave', handleMouseLeave);
return () => {
nav.removeEventListener('mouseenter', handleMouseEnter);
nav.removeEventListener('mouseleave', handleMouseLeave);
};
}, []);
useEffect(() => {
setMenu(location.pathname);
}, [location]);
return (
<nav>
<h1><span className="color3">CRAVE</span>Cart.</h1>
<div className="nav-part2">
<div className="nav-elem">
<h4>Our Story</h4>
<h5><span>Our Story</span></h5>
</div>
<div className="nav-elem">
<h4><Link to="/" className={menu === '/' ? 'active' : ''} onClick={() => setMenu('/')}>Home</Link></h4>
<h5><span><Link to="/about" className={menu === '/about' ? 'active' : ''} onClick={() => setMenu('/about')}>About Us</Link></span></h5>
<h5><span>How It Works</span></h5>
<h5><span>Blog</span></h5>
</div>
<div className="nav-elem">
<h4>Mess</h4>
<h5><span>Daily Specials</span></h5>
<h5><span>Weekly Menu</span></h5>
<h5><span>Meal Plans</span></h5>
<h5><span>Student Discounts</span></h5>
</div>
<div className="nav-elem">
<h4>Track Order</h4>
<h5><span>Order Status</span></h5>
<h5><span>Delivery Timeline</span></h5>
<h5><span>Recent Orders</span></h5>
<h5><span>Track with Map</span></h5>
</div>
<div className="nav-elem">
<h4>Contact Us</h4>
<h5><span>Customer Service</span></h5>
<h5><span>Feedback</span></h5>
<h5><span>FAQs</span></h5>
</div>
<div className="nav-elem">
<h4>About Agency</h4>
<h5><span>Our Team</span></h5>
</div>
</div>
<button>
Login
<svg fill="none" viewBox="0 0 20 20">
<path fill="#fff" d="M2.5 14.375V17.5h3.125l9.217-9.217-3.125-3.125L2.5 14.375Zm14.758-8.508a.83.83 0 0 0 0-1.175l-1.95-1.95a.83.83 0 0 0-1.175 0l-1.525 1.525 3.125 3.125 1.525-1.525Z"></path>
</svg>
</button>
<div id="nav-bottom"></div>
</nav>
);
};
export default Navbar;
App.jsx
import React from 'react';
import Navbar from './components/Navbar/Navbar';
import Home from './pages/Home/Home';
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<div className="App">
<Navbar />
<Routes>
<Route path='/home' element={<Home />} />
<Route path='/' element={<Home />} /> {/* Optional: Route for the home page */}
</Routes>
</div>
);
}
export default App;
when I add the Route option for my About Us page It gets overlapped on the Home page
AboutUs.jsx Code
import React, { useEffect } from 'react';
import LocomotiveScroll from 'locomotive-scroll'; // Import Locomotive Scroll
import gsap from 'gsap'; // Import GSAP
import './AboutUs.css'; // Make sure your CSS file path is correct
const AboutUs = () => {
useEffect(() => {
// Initialize Locomotive Scroll
const scroll = new LocomotiveScroll({
el: document.querySelector('#main'),
smooth: true,
});
// GSAP Animation Timeline
const tl = gsap.timeline();
tl.to('#page1', {
y: '100vh',
scale: 0.6,
duration: 0,
})
.to('#page1', {
y: '30vh',
duration: 1,
delay: 1,
})
.to('#page1', {
y: '0vh',
rotate: 360,
scale: 1,
duration: 0.7,
});
// Clean up Locomotive Scroll on component unmount
return () => {
scroll.destroy();
};
}, []);
useEffect(() => {
// Scrolling text animation for page5
const container = document.getElementById('page5');
const scrollingText = container.querySelector('.scrolling-text');
const containerWidth = container.offsetWidth;
const textWidth = scrollingText.scrollWidth;
const animate = () => {
let startPos = containerWidth;
const step = () => {
startPos -= 1; // Adjust the value to control the speed
if (startPos <= -textWidth) {
startPos = containerWidth;
}
scrollingText.style.transform = `translateX(${startPos}px)`;
requestAnimationFrame(step);
};
step();
};
animate();
}, []);
return (
<div id="main">
<div id="page1">
<div id="nav">
<h5>CarveCart</h5>
<h2>About Us</h2>
<i className="ri-menu-3-line"></i>
</div>
<div id="elems">
<div id="elem1">
<div id="image-div">
<img
src="https://t3.ftcdn.net/jpg/02/52/38/80/360_F_252388016_KjPnB9vglSCuUJAumCDNbmMzGdzPAucK.jpg"
alt="CarveCart"
/>
</div>
<h4>
CARVECART <span>NEW</span>
</h4>
<p>
CarveCart is an innovative food delivery platform, built on the
powerful MERN stack. Our app streamlines the process of ordering
from a wide selection of restaurants, with a focus on providing a
seamless user experience for food lovers everywhere.
</p>
</div>
<div id="elem2">
<h2>OUR TEAM</h2>
<h3>
Arya Joshi & Ananya Chitale
<br />
talented developers —
<br />
behind CarveCart.
</h3>
<h6>Tip! Drag sideways to navigate</h6>
</div>
<div id="elem3">
<div id="image-div">
<img
src="https://www.asokart.com/wp-content/uploads/2019/01/6-Nataraja-600x805.jpg"
alt="Visionaries"
/>
</div>
<h4>
The visionaries behind CarveCart <span>NEW</span>
</h4>
<p>
Arya and Ananya are the sole visionaries behind CarveCart, having
designed and developed every core feature using cutting-edge
technologies like React, MongoDB, Express, and Node.js. Their
combined expertise has shaped the app into a seamless and
intuitive platform for food delivery.
</p>
</div>
</div>
<h1>CraveCart.</h1>
</div>
<div id="page4">
<div id="page4-left">
<img
src="https://uploads-ssl.webflow.com/5f2429f172d117fcee10e819/605c679f33f67d3dd00b04b4_avatar-3.jpeg"
alt="Founders"
/>
</div>
<div id="page4-right">
<p>
CRAVECart is here to make your food delivery experience effortless
and enjoyable. Offering a wide range of dishes from local favorites
to gourmet meals, we prioritize quality and convenience in every
order.
<br />
Founded by Ananya Chitale and Arya Joshi, CRAVECart is dedicated to
bringing you exceptional service with just a few clicks. Enjoy
delicious meals delivered straight to your door!
</p>
</div>
</div>
<div id="page5">
<div className="scrolling-text">
<h1>
Let's create something together <span>Email me</span>
</h1>
<h1>
Let's create something together <span>Email me</span>
</h1>
<h1>
Let's create something together <span>Email me</span>
</h1>
{/* Duplicate content to ensure continuous scrolling */}
<h1>
Let's create something together <span>Email me</span>
</h1>
<h1>
Let's create something together <span>Email me</span>
</h1>
<h1>
Let's create something together <span>Email me</span>
</h1>
</div>
</div>
</div>
);
};
export default AboutUs;
Home.jsx
import React, { useEffect } from 'react';
import './Header.css'; // Ensure this contains the necessary CSS
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
const Header = () => {
// Register ScrollTrigger
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
const loadingAnimation = () => {
const tl = gsap.timeline();
tl.from("#page1", {
opacity: 0,
duration: 0.2,
delay: 0.2,
})
.from("#page1", {
transform: "scaleX(0.7) scaleY(0.2) translateY(80%)",
borderRadius: "150px",
duration: 2,
ease: "expo.out",
})
.from("nav", {
opacity: 0,
duration: 0.5,
delay: -1,
})
.to("nav", {
opacity: 1, // Ensure navbar becomes visible
duration: 0.5
})
.from("#page1 h1, #page1 p, #page1 div", {
opacity: 0,
duration: 0.5,
stagger: 0.2,
});
};
// Call the animation function when the component mounts
loadingAnimation();
}, []);
return (
<div id="main">
<nav className="visible">
{/* Your nav content goes here */}
</nav>
<div id="page1">
<h1>
<span className="color">Fast</span> cravings,{" "}
</h1>
<h1>
D
<span>
<svg className="c-bttn__morph" fill="none" viewBox="0 0 131 136">
<path
className="g-path"
data-morph="end"
fill="#fff"
d="M48 77.457v7.224h7.224l21.307-21.306-7.224-7.225L48 77.457Zm34.118-19.67a1.919 1.919 0 0 0 0-2.716l-4.508-4.508a1.919 1.919 0 0 0-2.716 0l-3.526 3.526 7.224 7.224 3.526-3.525Z"
></path>
</svg>
</span>
ne with <span className="color2">ease.</span>
</h1>
<p>
Delivering deliciousness to your doorstep with speed and simplicity.{" "}
<br /> seamless dining with our cutting-edge technology
<br />
</p>
</div>
<div id="page2"></div>
</div>
);
};
export default Header;
Here is the codesandBox link Check the App.jsx to make the changes:
https://codesandbox.io/p/live/8355c488-0788-48ab-ab64-93934edc4cd8
2
Answers
The answer is quite simple.
Here, you are going to navigate to /about when clicking the About us but you didn’t add the route to the App.jsx.
So the App.jsx should be like this.
Issue
The issue here is "polluted" global CSS styling. When the
<Route path='/about' element={<AboutUs />} />
route is added to the routes, theAboutUs
component is imported, including itsAboutUs.css
file which is loaded into the DOM and applied. Many of your various CSS files all define rules targeting the same CSS selectors, so theAboutUs
CSS styles are overriding various elements of your nav bar and header, and likely other routed components.Compare for example the applied
h1
element rules:Without the
AboutUs
route and CSSWith the
AboutUs
route and CSS includedNote that
AboutUs.css
‘s#page1 h1
rule is applied even though the URL path is still"/"
and theHome
component is rendered.AboutUs.css
Solution
CSS is globally applied, so the solution is to limit the scope of your CSS rules via selectors. This is generally achieved by wrapping a specific page or section/area/etc in a class or some unique identifier.
Example:
AboutUs.jsx
Provide an
"about-us"
CSS classname to one of the component’s root elements that wraps the page component’s content.AboutUs.css
Here I’m only showing a single rule, i.e. all
h1
elements that are descendants of any elements with the"about-us"
CSS classname, but this will be done for any CSS rules you want to apply and limit to the About page’s content.You can see here that the
AboutUs.css
is loaded but theh1
element’s CSS on the home page isn’t polluted by the about page’s CSS.