Struggling to replicate a design due to issues with the overlay section. I have separate divs for the menu bar, globe, and header text but positioning them as overlays is proving problematic. Attempted to use zIndex without success.
https://i.sstatic.net/9urUE.jpg
Current setup: https://i.sstatic.net/fF92F.jpg
Code from App.js:
import React from 'react';
import logo from './logo.svg';
import Globe from './Assets/Globe_.png';
import './App.css';
import Nav from './Components/Nav';
import Header from './Components/Header';
import WhatWeDo from './Components/WhatWeDo';
import { Container, Box, BoxTitle, BoxText } from "./Components/GlobalStyles";
import './App.css';
//Create background gradient in global style
//Remove image resizer dependency and flexa
function App() {
return (
<div className="bg-gradient">
<Container>
<div>
<Nav />
<img src={Globe} className="responsive" alt="Unicron" />
<Header />
<WhatWeDo />
</div>
</Container>
</div>
);
}
export default App;