I'm trying to make a website, and I would like the first section of the landing page (the navigation header) to have a transparent background. The rest of the pages do not need transparent backgrounds.
The landing page is built using fullPage.js. I have tried using the scroll event, but it doesn't seem to be supported with fullPage.js. How else can I apply a separate CSS style to just one section using fullPage.js?
I'm adding current Header component code in App.js of React, and confusing to make only one status for the very first landing page's section's header.
function App() {
return (
<>
<Header />
<Routes>
<Route path='/' element={<MainPage />} />
<Route path='/company' element={<IntroPage />} />
<Route path='/technology' element={<TechnologyPage />} />
<Route path='/products' element={<ProductsPage />} />
<Route path='/RnD' element={<RnDPage />} />
<Route path='/support' element={<SupportPage />} />
<Route path='/login' element={<LoginPage />} />
<Route />
<Route />
</Routes>
<Footer />
</>
);
}
export default App;There may be a better solution, but the only one I can think of is to use two different heads. One on the page where it needs to be transparent, and another one on for rest. Give them different ID's, and just set it to transparent on the one where you need it.