CODEWITHSUNDEEP
cssformsnavbartailwind-css
falkon
falkon

Reputation: 39

How to make navbar overlap other contents in tailwind css

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?

Upvotes: 1

Views: 3205

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 24980

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:

enter image description here

Output in smaller device:

enter image description here

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

enter image description here

Output in small device with hamburger menu

Enter description

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>

Upvotes: 3

user8836786
user8836786

Reputation:

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

Upvotes: 1

Related Questions