My Bootstrap 5.0 Navbar flashes on large screens, and then disappears

Question

This seemed to be working, until I came back to it some time later - now the navbar links only appear on large screens in Chrome, not FF or Edge.

On loading the page, the links in the navbar below the primary logo at page top appear momentarily, and then are gone.

The navbar behaviour seems to be as expected once the viewport width is reduced to expose the mobile hamburger prompt.

A link to the page exhibiting this behaviour

The HTML markup for the navbar element:

<nav class="navbar navbar-expand-md navbar-light fixed-top background-color-FFF5E5 font-bellotatext-bold pt-md-9">
<div class="container-fluid">
    <a class="navbar-brand d-block d-md-none" href=""><img src="/images/navbar/logo-gongeando.svg" class="d-block img-fluid" alt="" /></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <!--
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Science</a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#"></a></li>
                    <li><a class="dropdown-item" href="#"></a></li>
                    <li><a class="dropdown-item" href="#"></a></li>
                </ul>
            </li>
            -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Tools</a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Find your inner voice</a></li>
                    <li><a class="dropdown-item" href="#">Meditations</a></li>
                    <li><a class="dropdown-item" href="#">A Glossary</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Events</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Testimonials</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact me</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=""><img src="/images/navbar/icon-navbar.svg" title="" /></a>
            </li>
            <!--<li class="nav-item">
                <a class="nav-link" href="#">Shop</a>
            </li>-->
        </ul>
    </div>
</div>

I can only guess that in modifying the vanilla bootstrap navbar in order to try and add in the centered logo element for -lg screens, i have gone wrong somewhere?

Answer 1

Using fixed-top and setting the z-index for the first container was for some reason obscuring the navbar in firefox. No idea why