How to make navbar overlap other contents in tailwind css - css

Question

When I open my nav bar(for mobile version) on my first page it works fine and overlaps the contents (picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057465795874906/unknown.png
And when I open my navbar on the second page(forms page) the forms overlap the navbar.(picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057531591929876/unknown.png
How could I fix that?
My code for my navbar is:
import React, {useState} from 'react';
import {GiHamburgerMenu} from 'react-icons/gi';
import {AiOutlineClose} from 'react-icons/ai';
import {NavLink} from 'react-router-dom';
const NavBar = () => {
const [isOpen, setIsOpen] = useState(true);
const toggle = () => {
setIsOpen(!isOpen);
}
return (
<div className='flex sticky justify-between items-center h-20 max-w-full mx-auto px-4 text-white top-0'>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9'/>
<ul className='hidden md:flex'>
<NavLink to="/" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Home</li></NavLink>
<NavLink to="/details" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>About</li></NavLink>
<NavLink to="https://www.google.com" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[35px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Host</li></NavLink>
<NavLink to="/info" activeClassName="active"><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[55px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600'>Tutorial</li></NavLink>
</ul>
<div onClick={toggle} className='block md:hidden'>
{!isOpen ? <AiOutlineClose size={20}/> : <GiHamburgerMenu size={20}/>}
</div>
<div className={!isOpen ? 'fixed left-0 top-1 w-[60%] h-full border-r border-r-gray-800 bg-gray-900 ease-in-out duration-500' : 'fixed left-[-100%] ease-in-out duration-500'}>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9 left-0'/>
<ul className='uppercase p-4'>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Home</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>About</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Host</li>
<li className='p-4 hover:border-b hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Tutorial</li>
</ul>
</div>
</div>
)
}
export default NavBar;
First page:
import React from 'react'
import Typed from 'react-typed';
import { Link } from 'react-router-dom';
export const Welcome = () => {
return (
<div className="text-white">
<div
id="index"
className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<div className="flex justify-center items-center">
<h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
Web
</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-indigo-600"
strings={["site", "Adam"]}
typeSpeed={70}
backSpeed={100}
loop
/>
</div>
<p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
A website that is focused on <a className="underline text-indigo-600">design</a> and
<a className="underline text-indigo-600"> simplicity</a>
</p>
<Link to="/details"><button className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-white hover:ring-indigo-600 hover:bg-indigo-600 hover:shadow-xl hover:shadow-indigo-700 hover:text-white hover:scale-110">
Create
</button></Link>
</div>
</div>
)
}
Forms Page:
Code from: https://tailwindui.com/components/application-ui/forms/sign-in-forms (First Form). So how could i make my navbar overlap my forms page?

Answer 1

Increase the z-index of the nav bar so that it is higher than that of the form.

Answer 2

You'll have to work with relative absolute and z-index tailwind classes to overlap the navbar on the contents of the page.
Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Output in large device:
Output in smaller device:
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Further more you can use this tailwind play link
Extra. Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with hamburger menu
When clicked on hamburger menu
Code:
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl pl-24 md:p-0 main_content">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>