How Can I See My Navbar Hamburger?

Wappler General Need Help
1

Hi there @Teodor…

I have a navbar for my app’s web site, but when I reduce the screen size below md the Hamburger does not show.

Can you tell me what I have done wrong please?

Thanks!

Antony.

<!-- Wappler include head-page="index.php" appConnect="local" is="dmx-app" bootstrap5="local" fontawesome_5="local" -->
<div class="container py-3" id="c_header">
    <div class="row justify-content-between">
        <div class="col align-self-center col_header_left">
            <a data-toggle="collapse" data-target=".navbar-collapse.show" class="nav-item nav-link" href="index.php" id="nav_header_left" dmx-on:click="">Header left</a>
        </div>
        <div class="col text-end">
            <nav class="py-0 navbar text-end justify-content-end navbar-expand-md">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation" data-bs-toggle="list">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="collapse1" class="collapse navbar-collapse">
                    <a data-toggle="collapse" data-target=".navbar-collapse.show" class="nav-item nav-link" href="features.php" id="nav_features" dmx-on:click="">Features</a>
                    <a data-toggle="collapse" data-target=".navbar-collapse.show" class="nav-item nav-link" href="pricing.php" id="nav_pricing" dmx-on:click="">Pricing</a>
                    <a data-toggle="collapse" data-target=".navbar-collapse.show" class="nav-item nav-link" href="faq.php" id="nav_faq" dmx-on:click="">FAQ</a>
                    <a data-toggle="collapse" data-target=".navbar-collapse.show" class="nav-item nav-link" href="team.php" id="nav_team" dmx-on:click="">Team</a>
                    <a data-toggle="collapse" data-target=".navbar-collapse.show" class="nav-item nav-link" href="community.php" id="nav_community" dmx-on:click="">Community</a>
                    <a data-toggle="collapse" data-target=".navbar-collapse.show" class="nav-item nav-link" href="events.php" id="nav_events" dmx-on:click="">Events</a>
                    <a data-toggle="collapse" data-target=".navbar-collapse.show" class="nav-item nav-link" href="contact.php" id="nav_contact" dmx-on:click="">Contact</a>
                </div>
            </nav>
        </div>
    </div>
</div>
2

I’ve found the answer!

You cannot leave the navbar “Theme” set to default… it needs to be one of the other options…

This article helped… it is easy to forget that the navbar setup is a Bootstrap 5 thing, not a Wappler thing!

3 Likes