SOLVED Unexpected dropdown behaviour on mobile

Bootstrap Studio Help
1

unexpected-dropdown-menu-behaviour

I have created a few sites with Bootstrap Studio and haven’t seen this before. The dropdown behaves the same on small screens as it does on desktop screens. I expect it’s my ignorance rather than a bug.
As far as I can recall, I made this in the same way as I have made other pages and when I compare it to those other Bootstrap Studio projects, where dropdowns expand more like an accordion, it looks about the same, aside from classes used for positioning.
Could somebody please set me straight?!
Navbar code shown below.
It’s a Bootstrap 5 project using Bootstrap Studio 6.3.1


        <nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-dark bigbrown" id="mainNav">
            <div class="container"><a class="navbar-brand" href="/bigbrown/index.html"><img id="logo" class="img-fluid" src="/big-brown-fishing-lakes-logo-small-black.png"></a><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto text-uppercase">
                        <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#">Dropdown </a>
                            <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="../fishing-preserve.html">Fish &amp; Pay</a></li>
                        <li class="nav-item"><a class="nav-link" href="/bigbrown/fish-stocking.html">Fish Stocking</a></li>
                        <li class="nav-item"><a class="nav-link" href="/bigbrown/our-story.html">Our story</a></li>
                        <li class="nav-item"></li>
                        <li class="nav-item"><a class="nav-link" href="../contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
2

Okay, no sooner had I written that all out than I realised what must be the issue.
I had inadvertently added “position:absolute” to my custom class definition for “.dropdown-menu”.
So, mystery (which turns out to be not such a mystery) solved!

3

Sorry, but what’s the problem xD?