I want to make navbar rests on top of all components but when I open navigation menu it pushes all the components of index page down.

I am using Next js, Tailwind css and Framer motion.

It happens only when scroll top = 0 and when we scroll a bit it works as expected (comes on top of other components)

Link to GitHub repository

This file is navbar.js in components folder

import { motion, AnimatePresence, useCycle, usePresent } from 'framer-motion';
import { useState } from 'react';
import Link from 'next/link';
import React from 'react';
import ThemeSwitch from './ThemeSwitch';
import Burger from './burger';
import { burg } from './burger';

const sidebarVariants = {
  open: {
    opacity: '100%',
    y: 0,
    transition: {
      duration: 0.5,
    },
  },
  closed: {
    opacity: '0%',
    y: '-100vh',
    transition: {
      duration: 0.5,
      delay: 1,
    },
  },
};

const Navigation = () => {
  const [isOpen, toggleOpen] = useCycle(false, true);
  function navChange() {
    toggleOpen();
  }
  function liToggle() {
    toggleOpen();
    burg();
  }
  return (
    <>
      <div className='sticky top-0 z-20 py-2 bg-white/60 backdrop-blur md:py-6 md:mb-6 dark:bg-black/60 shadow-lg shadow-black/5 dark:shadow-white/5'>
        <div className='container px-4 mx-auto lg:max-w-4xl flex items-center justify-between transition duration-500'>
          <Link href='/'>
            <a
              className={
                'font-medium tracking-wider transition-colors text-gray-900 hover:text-sky-500 dark:text-white hover:animate-pulse '
              }
            >
              Atharv Bilbile
            </a>
          </Link>
          <div className='flex items-center justify-between'>
            <Link href='/'>
              <a className='hidden md:flex px-3 py-2 rounded-3xl hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'>
                Home
              </a>
            </Link>
            <Link href='/'>
              <a className='hidden md:flex px-3 py-2 rounded-3xl hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'>
                About
              </a>
            </Link>
            <Link href='/abnext'>
              <a className='hidden md:flex px-3 py-2 rounded-3xl hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'>
                Blogs
              </a>
            </Link>
            <Link href='/abnext'>
              <a className='hidden md:flex px-3 py-2 rounded-3xl hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'>
                Contact
              </a>
            </Link>
            <ThemeSwitch />
            <button onClick={navChange} className='md:hidden'>
              <Burger />
            </button>
          </div>
        </div>
      </div>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            variants={sidebarVariants}
            initial={{ y: '-100vh' }}
            animate={isOpen ? 'open' : 'closed'}
            exit={{ opacity: '0%', y: '-100vh' }}
            transition={{ duration: '1', delay: 0 }}
            className='sticky top-12 z-10 flex justify-center py-9 bg-white/60 dark:bg-black/60 backdrop-blur shadow-2xl dark:shadow-white/5'
          >
            <ul className=' flex flex-col text-center'>
              <Link href='/'>
                <a>
                  <li
                    onClick={liToggle}
                    className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
                  >
                    Home
                  </li>
                </a>
              </Link>
              <Link href='/'>
                <a>
                  <li
                    onClick={liToggle}
                    className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
                  >
                    About
                  </li>
                </a>
              </Link>
              <Link href='/abnext'>
                <a>
                  <li
                    onClick={liToggle}
                    className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
                  >
                    Blogs
                  </li>
                </a>
              </Link>
              <Link href='/abnext'>
                <a>
                  <li
                    onClick={liToggle}
                    className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
                  >
                    Contact
                  </li>
                </a>
              </Link>
            </ul>
          </motion.div>
        )}
      </AnimatePresence>{' '}
    </>
  );
};

export default Navigation;

CodePudding user response：

The navbar has position sticky which acts as position relative until certain threshold, which means it's positioned according to the normal flow of the document -> "pushes" everything below it. What you want is position fixed on the navbar (this also want to give navbar width 100%).

So change:

className='sticky top-12 z-10 flex justify-center py-9 bg-white/60 dark:bg-black/60 backdrop-blur shadow-2xl dark:shadow-white/5'

To:

className="fixed w-full top-12  z-10 flex justify-center py-9 bg-white/60 dark:bg-black/60 backdrop-blur shadow-2xl dark:shadow-white/5"