I'm in the process of developing a responsive portfolio page using ReactJS and Tailwind CSS. When the screen size is smaller than the medium breakpoint, a hamburger menu icon appears. However, when I click on the hamburger icon to view the menu items, my home page text ends up overlapping with the menu items. Any suggestions on how to resolve this issue?
Click here for a screenshot showing the opened hamburger menu
NavBar component:
...Home page component:
...import NavBar from "./components/NavBar";
import Home from "./components/Home";
function App() {
return (
<div>
<NavBar />
<Home />
</div>
);
}
export default App;
Your help is greatly appreciated!