import Home from './components/Home/Home.jsx'
import Navbar from './components/Navbar/Navbar'
import {BrowserRouter, Routes, Route} from "react-router-dom"
export default function App() {
return (
<BrowserRouter>
<Navbar />
<div className="container">
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
</BrowserRouter>
);
}
App.css:
.container {
flex: 1;
display: flex;
flex-direction: column;
}
Navbar CSS
import React from "react";
import cart from "../assets/images/cart.png"
import { TfiMenu } from "react-icons/tfi";
import { AiOutlineCloseCircle} from "react-icons/ai";
export default function Navbar() {
const [open, setopen] = React.useState(false);
let Links = [
{name:"Home" ,link:"/"},
{name:"Headphone" ,link:"/"},
{name:"Speaker" ,link:"earphones"},
{name:"Earphone" ,link:"/"},
];
const change= ()=> {
setopen(!open);
}
return (
<>
<div className=" fixed shadow-md w-full top-0 left-0 ">
<div className=" lg:flex items-center bg-black py-4 md:justify-around">
<div className=" flex justify-between px-3 pt-2 text-white cursor-pointer font-[Poppins]">
audiophile
<div onClick={change} className=" lg:hidden w-9 inline-block">
{
open
? (<span className=""><AiOutlineCloseCircle/></span>)
: (<span className=""><TfiMenu/></span>)
}
</div>
</div>
<ul className={`lg:flex md:items-center ${open ?"" :"hidden"} `}>
{ Links.map((link) => (
<li className=' md:ml-8 text-xl md:my-0 my-7'>
<a href={link.link} className='text-white hover:text-yellow-500 duration-500'>{link.name}</a>
</li>
))}
</ul>
<div className>
<img className="absolute right-20 md:inline-block w-7 cursor- top-5 " src={cart} alt="cart" />
</div>
</div>
</div>
</>
);
}
I am facing an issue with rendering the home section properly in my code. The top portion of the home page always appears under the navbar. My navbar is positioned sticky and I am unable to make the home width 100%. It seems like it is being affected by another component. Currently, I am using margin-top (mt-44) to adjust the position, but any help or suggestions on how to resolve this would be greatly appreciated.