I am facing an issue where the image from a particular section overlaps with the Navbar dropdown on mobile devices. Adding z-50 to the navbar did not solve the problem as expected.
What I want is for the image to remain below the dropdown menu when it is opened
The linked image should appear beneath the black navbar, positioned against an orange background
This snippet shows the code for the navbar:
import React from "react";
import Link from "next/link";
import { useState } from "react";
function MobileNav({ open, setOpen }: any) {
// function logic here
}
export default function Navbar() {
// component code here
}
And here is the section content:
import React from "react";
import type { NextPage } from "next";
import Navbar from "../components/Navbar";
import Head from "next/head";
import Image from "next/image";
import adrian2 from "../public/adrian3.png";
const about: NextPage = () => {
// function logic here
};
export default about;