I was using the CSS position: sticky on my sidebar so it moved down as the user scrolled. However when I added the mobile menu which transitioned in from the right, the sticky sidebar broke. Could not understand why! before adding mobile menu it worked fine but after adding mobile menu it broke it dose not sticky at top

parent main div
    <main className="grid lg:grid-cols-3 md:grid-cols-1 min-h-screen">

      <section className="hidden lg:block border-l border-gray-200 mt-8 sticky top-0 h-fit">
        <RightSideBar />
      </section>
</main>

full code
    <main className="grid lg:grid-cols-3 md:grid-cols-1 min-h-screen">
      {/* left section show posts */}
      <section className="lg:col-span-2 min-h-screen mt-8">

        {/* show followings */}
        <div className="w-[80%] mx-auto border-b pb-5 px-4 border-gray-200 hidden lg:block">
          <ShowFollowingSection />
        </div>
        {/* end of show followings */}

        <div className="mt-7">
        <PostOverviewOnHome/>
        <PostOverviewOnHome/>
        <PostOverviewOnHome/>
        </div>

      </section>

      {/* right section show details */}
      <section className="hidden lg:block border-l border-gray-200 mt-8 sticky top-0 h-fit]">
        <RightSideBar />
      </section>

    </main>