Position absolute inside position sticky

Question

---

Issue with mobile-nav-bar not working on click when nav-bar is position: sticky

I'm encountering an issue with my mobile navigation bar (mobile-nav-bar) not working properly when the parent navigation bar (nav-bar) is set to position: sticky. Here's the structure of my navigation components and the relevant CSS:

// Nav.jsx

import React from "react";
import "../style/nav.css";
import { ReactComponent as MenuIcon } from "../svg/menu-outline.svg";

const Nav = () => {
  return (
    <div className="nav-bar">
      <div className="nav-flex1">
        <div>Bangalore</div>
        <div className="nav-flex2">
          {/* Navigation links */}
        </div>
        <div className="toggle-switch">
          {/* Toggle switch */}
        </div>
        <div className="mobile-button">
          {/* Mobile button */}
        </div>
        <div className="mobile-nav-bar">
          {/* Mobile navigation links */}
        </div>
      </div>
    </div>
  );
};

export default Nav;

/* Nav.css */

.nav-bar {
  /* Nav-bar styles */
  position: sticky;
  top: 0;
}

/* Other styles */

The issue arises when I click on the mobile button (mobile-button) to toggle the mobile navigation menu (mobile-nav-bar). It doesn't display properly. However, when I remove position: sticky from .nav-bar, the mobile navigation works as expected.

I've tried adjusting the z-index property and other styles, but I haven't been able to resolve the issue. Any insights into why the mobile navigation isn't working properly with position: sticky on the parent nav-bar would be greatly appreciated.

Thank you!

---