I'm currently working on a segment of my header that includes a navbar with 3 links, as well as a dropdown menu listing additional functionalities. Here is the current code I have:
<div class="col-md-4 pt-4">
<nav class="navbar navbar-expand-md">
<div class="container-fluid me-0 pe-0" style="width: fit-content">
<a href="/index.php?action=who_are_we" class="black_links pe-2"><?php echo $GLOBALS['translation']['who_are_we']; ?></a>
<a href="/index.php?action=list_activities" class="black_links ps-2 pe-2"><?php echo $GLOBALS['translation']['schedule']; ?></a>
<a href="/index.php?action=contact" class="black_links ps-2 pe-2"><?php echo $GLOBALS['translation']['contact']; ?></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">
<li class="nav-item dropdown btn-group">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<?php echo $GLOBALS['translation']['show_more']; ?>
</button>
<ul class="dropdown-menu dropdown-menu-end ">
<a href="/index.php?action=calendar"><li class="dropdown-item nav-link black_links"><?php echo $GLOBALS['translation']['calendar']; ?></li></a>
<a href="/index.php?action=list_news"><li class="dropdown-item nav-link black_links"><?php echo $GLOBALS['translation']['news']; ?></li></a>
<a href="/index.php?action=register"><li class="dropdown-item nav-link black_links"><?php echo $GLOBALS['translation']['subscribe']; ?></li></a>
<a href="/index.php?action=login"><li class="dropdown-item nav-link black_links"><?php echo $GLOBALS['translation']['login']; ?></li></a>
</ul>
</li>
</ul>
</div>
</div>
</nav>
My issue relates to responsiveness. Using Bootstrap for this setup, on a large screen, it looks like this: Navbar in large screen
However, when reducing the screen size to medium or smaller, there are problems. The burger icon appears, but upon clicking it, only one item ("Show more") is displayed, leading to an awkward layout like this: Navbar in medium or less screen after clicking burger-icon
Subsequently, once "Show more" is selected, the display changes to this format: Navbar in medium or less screen after clicking on show more
My objective is to have the dropdown items appear instead of "Show more" when clicking the burger icon in a medium or smaller screen. Additionally, I am unsure how to integrate the three initial items (who we are, schedule, and contact) into the burger icon when the screen size decreases.
Any assistance would be greatly appreciated!