I am struggling to ensure that my Footer component always appears at the bottom of each page on my app. Despite trying different approaches, I still can't identify the root cause of the issue.
Below is a snippet of my App.js file:
import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Landing from "./components/layout/Landing";
import Contact from "./components/layout/Contact";
import Footer from "./components/layout/Footer";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<Route exact path="/contact" element={<Contact />} />
</Routes>
<Footer />
</Router>
);
}
export default App;
The current issue is that the navbar is displayed at the top of the page while the Landing component seems to be positioned behind it. Any suggestions on how to resolve this would be highly appreciated.
Within the Landing Component, there are two sub-components:
import React from "react";
import LandingInner from "../pages/landing/LandingInner";
import LandingCards from "../pages/landing/LandingCards";
const Landing = () => {
return (
<section className="landing">
<div className=" dark-overlay">
<LandingInner />
<LandingCards />
</div>
</section>
);
};
export default Landing;
Currently, the Footer is immediately visible at the bottom of the screen upon loading the page, but I intend for it to be fixed at the bottom and only appear when scrolling down. It should consistently remain the last component on every page navigation, similar to how the Navbar persists as the first component.
Here is the existing CSS styling for the Footer:
.footer {
border: 5px solid black;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
To summarize, I aim for the footer to consistently display at the bottom of every page within my app, rather than on the screen itself upon loading.