2 levels of header nav bar: 1 primary, 1 secondary

Question

I am looking to achieve 2 levels of top navbar in Sphinx: One for website navigation, another for navigating between different kinds of docs.

I am using pydata-theme currently. While I can get one level navbar. I am not able to figure out how to get the secondary navbar.

What should be the relevant edits in conf.py and CSS, HTML files to achieve the same? I know there is a way to do it in Mintlify, but I am looking to achieve it in Sphinx.

An example website is: https://docs.typo3.org/m/typo3/tutorial-getting-started/13.4/en-us/Concepts/Backend/Index.html

I have tried multiple combinations of conf.py and HTML, CSS edits, but none of them is working. I am getting the 2 navbars, but they are getting stacked horizontally, not vertically.

Here is my conf.py, HTML, CSS code:

<!-- _templates/navbar.html -->

<!-- First Navbar: General Site Navigation -->
<div class="navbar-container navbar-general bg-light">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">My Website</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarFirst" aria-controls="navbarFirst" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarFirst">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/product/">Product</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/company/">Company</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

<!-- Second Navbar: Documentation Navigation -->
<div class="navbar-container navbar-docs bg-dark">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand text-light" href="#">Docs</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSecond" aria-controls="navbarSecond" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSecond">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-light" href="/docs/api-reference/">API Reference</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="/docs/guide/">Guide</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="/docs/tutorials/">Tutorials</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

/* Ensure vertical stacking of navbars */
.navbar-container {
    margin-bottom: 0; /* Remove unnecessary spacing between the two bars */
    width: 100%; /* Ensure full width */
}

/* Add spacing between navbars, if desired */
.navbar-general {
    border-bottom: 1px solid #ddd; /* Optional: Add separator line */
}

.navbar-docs {
    border-top: 1px solid #444; /* Optional: Add separator line */
}

html_theme_options = {
    "theme_toggle": False,
    "navbar_end": ["navbar.html"],  # Optional: Add social media icons on the right
}

html_static_path = ['_static']
html_css_files = ['custom.css']