I try to figure out why my bootstrap html class='dropdown-menu' with a class='from-select' doesnt show me my options properly on a mobile device.
Here is my html:
<!-- second line of Navbar -->
<nav class="navbar navbar-dark bg-primary">
<div class="container d-flex flex-row justify-content-between p-0">
<div class="dropdown show">
<button class="btn navbar-brand dropdown-toggle m-0" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<!-- Bootstrap Translate Icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16">
<path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"></path>
<path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"></path>
</svg>
</button>
<!-- Known Bug: On android device chrome it opens a native option table, not the css formatted bootstrap -->
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<form action="{% url 'home:set_language' %}" method="post">{% csrf_token %}
<input name="next" type="hidden" value="{{ redirect_to }}">
<select name="language" class="form-select" size="3">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<li><option class="dropdown-item" value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected {% endif %}>
{{ language.name_local }} ({{ language.code }})</option></li>
{% endfor %}
</select>
<div class="text-center mt-1">
<button type="submit" class="btn btn-primary">{% translate "Select" %}</button>
</div>
</form>
</ul>
</div>
<div>
<a href="#" onclick="return false;" class="navbar-brand m-0"> <strong>{{ page_name }}</strong> </a>
</div>
<a class="btn navbar-brand m-0" onClick="return false;" id="contactbutton1" href="#">
<!-- Bootstrap Phone Icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"></path>
</svg>
</a>
</a> </div>
</nav>
which renders for laptop like this: language selection on laptop
and on mobile device like this: language selection on mobile
Maybe someone can point me in the right direction to make that more smooth on mobile. Thanks.