Hamburger Menu dropdown not working on website

Wappler General
#1

Hamburger Menu dropdown not working on website, my nav is in a php include file and all is good except the hamburger does nothing when clicked on. not sure what I am missing
same issue on several other sites I have

webpage: https://mrprint.ca/index.php
code from php include file is below

<!-- Wappler include head-page="header_old.php" appConnect="local" is="dmx-app" fontawesome_5="cdn" fontawesome_5pro="cdn" bootstrap5="cdn" jquery_slim_35="cdn" bootstrap_icons="cdn" -->

<header><div class="container-fluid">

    <div class="row row-cols-xl-12 row-cols-12">

        <div class="col">

            <nav class="navbar navbar-expand-lg justify-content-between p-0 flex-column flex-lg-row ms-lg-3 me-lg-3 ps-lg-2 pe-lg-2">

<div class="container-fluid">

                <span class="navbar-text small ms-2 pt-2 pb-2 ps-2 pe-2 fw-bolder ps-lg-2 d-none d-sm-block"><i class="fa fa-map-marker"></i> 2-487 Dundas Street West, Belleville ON Canada</span>

                <span class="navbar-text p-2 small fw-bolder"><i class="fa fa-mobile"></i>&nbsp;<a href="tel:613-967-9553" class="ms-lg-auto ps-lg-2">613-967-9553</a>&nbsp; TF <a href="tel:1-800-883-3724"

                     class="fw-bolder">800-883-3724

                    </a> </span>

                <span class="navbar-text d-none d-sm-block d-md-block small me-4 pt-2 pb-2 ps-2 pe-2"><i class="fa fa-envelope"></i><a href="mailto:info@mrprint.ca" class="fw-bolder ps-lg-2">email us</a> </span>

            </div>

</nav>

        </div>

    </div><div class="row border-dark rounded border rounded-1 style6 row-cols-12">

        <div class="col col-lg-4 text-center"><a class="navbar-brand me-auto ms-auto style12" href="index.php"><img src="images/logos/mrp_logo_web.png" width="220px" wappler-command="updateImage" class="style7"></a></div>

        <div class="col col-lg text-center style8">

            <h1 class="text-lg-center style10">

                OPEN FOR BUSINESS</h1>

            <p class="fw-bold text-lg-center style11">ONLINE | EMAIL PHONE | CURBSIDE | DROP SHIP</p>

        </div>

    </div><div class="row">

        <div class="col">

            <nav class="navbar navbar-expand-lg bg-light justify-content-between navbar-light">

<button class="navbar-toggler" type="button" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation" data-bs-toggle="collapse" data-bs-target="#collapse1">

  <span class="navbar-toggler-icon"></span>

</button><div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">

                    <div class="navbar-nav">

                        <a class="nav-item nav-link active" href="../index.php" id="home">Home</a><a class="nav-item nav-link" href="../about.php" id="about">About</a>

                        <a class="nav-item nav-link" href="../advertising.php" id="advertising">Advertising</a>

                        <a class="nav-item nav-link" href="../digital.php" id="digital">Digital</a>

                        <a class="nav-item nav-link" href="../offset.php" id="offset">Offset</a>

                        <a class="nav-item nav-link" href="../large.php" id="LargeFormat">Large Format</a>

                        <a class="nav-item nav-link" href="../design.php" id="design">Design</a>

                        <a class="nav-item nav-link" href="../client.php" id="login">Login</a><a class="nav-item nav-link" href="../templates_menu.php" id="templates">Templates</a><a class="nav-item nav-link" href="../upload.php"

                            id="uploads">Uploads</a><a class="nav-item nav-link" href="../contact.php" id="contact">Contact</a>

                    </div>

                </div><div class="navbar-nav justify-content-end d-none d-lg-flex ms-md-auto">

                    <a class="nav-item nav-link" href="https://www.linkedin.com/in/normclifton/" id="LinkedIn" target="_blank"><i class="fa fa-linkedin"></i></a>

                    <a class="nav-item nav-link" href="https://www.linkedin.com/company/1966371/admin/" target="_blank"><i class="fa fa-facebook"></i></a><a class="nav-item nav-link" href="https://www.facebook.com/MrPrint.ca/" target="_blank"><i

                            class="fa fa-twitter"></i></a>

                </div>

</nav>

                    

        </div>

    </div>

</div></header>
#2

Your collapse button for the navbar targets an element with an id of collapse1:

<button class="navbar-toggler" type="button" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation" data-bs-toggle="collapse" data-bs-target="#collapse1">

while your navbar collapse has an id of navbar1_collapse:

<div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">

these need to be the same - i.e. the toggler button should be pointing to the id of your nabvbar collapse element.

#3

Hello Teodor - I changed both to “collapse” trying to reference the collapse element - obviously i was wrong
am i missing the collapse element - not sure where that is in my code - update below

<!-- Wappler include head-page="header_old.php" appConnect="local" is="dmx-app" fontawesome_5="cdn" fontawesome_5pro="cdn" bootstrap5="cdn" jquery_slim_35="cdn" bootstrap_icons="cdn" -->

<header><div class="container-fluid">

    <div class="row row-cols-xl-12 row-cols-12">

        <div class="col">

            <nav class="navbar navbar-expand-lg justify-content-between p-0 flex-column flex-lg-row ms-lg-3 me-lg-3 ps-lg-2 pe-lg-2">

<div class="container-fluid">

                <span class="navbar-text small ms-2 pt-2 pb-2 ps-2 pe-2 fw-bolder ps-lg-2 d-none d-sm-block"><i class="fa fa-map-marker"></i> 2-487 Dundas Street West, Belleville ON Canada</span>

                <span class="navbar-text p-2 small fw-bolder"><i class="fa fa-mobile"></i>&nbsp;<a href="tel:613-967-9553" class="ms-lg-auto ps-lg-2">613-967-9553</a>&nbsp; TF <a href="tel:1-800-883-3724"

                     class="fw-bolder">800-883-3724

                    </a> </span>

                <span class="navbar-text d-none d-sm-block d-md-block small me-4 pt-2 pb-2 ps-2 pe-2"><i class="fa fa-envelope"></i><a href="mailto:info@mrprint.ca" class="fw-bolder ps-lg-2">email us</a> </span>

            </div>

</nav>

        </div>

    </div><div class="row border-dark rounded border rounded-1 style6 row-cols-12">

        <div class="col col-lg-4 text-center"><a class="navbar-brand me-auto ms-auto style12" href="index.php"><img src="images/logos/mrp_logo_web.png" width="220px" wappler-command="updateImage" class="style7"></a></div>

        <div class="col col-lg text-center style8">

            <h1 class="text-lg-center style10">

                OPEN FOR BUSINESS</h1>

            <p class="fw-bold text-lg-center style11">ONLINE | EMAIL PHONE | CURBSIDE | DROP SHIP</p>

        </div>

    </div><div class="row">

        <div class="col">

            <nav class="navbar navbar-expand-lg bg-light justify-content-between navbar-light">

<button class="navbar-toggler" type="button" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation" data-bs-toggle="collapse" data-bs-target="#collapse">

  <span class="navbar-toggler-icon"></span>

</button><div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">

                    <div class="navbar-nav">

                        <a class="nav-item nav-link active" href="../index.php" id="home">Home</a><a class="nav-item nav-link" href="../about.php" id="about">About</a>

                        <a class="nav-item nav-link" href="../advertising.php" id="advertising">Advertising</a>

                        <a class="nav-item nav-link" href="../digital.php" id="digital">Digital</a>

                        <a class="nav-item nav-link" href="../offset.php" id="offset">Offset</a>

                        <a class="nav-item nav-link" href="../large.php" id="LargeFormat">Large Format</a>

                        <a class="nav-item nav-link" href="../design.php" id="design">Design</a>

                        <a class="nav-item nav-link" href="../client.php" id="login">Login</a><a class="nav-item nav-link" href="../templates_menu.php" id="templates">Templates</a><a class="nav-item nav-link" href="../upload.php"

                            id="uploads">Uploads</a><a class="nav-item nav-link" href="../contact.php" id="contact">Contact</a>

                    </div>

                </div><div class="navbar-nav justify-content-end d-none d-lg-flex ms-md-auto">

                    <a class="nav-item nav-link" href="https://www.linkedin.com/in/normclifton/" id="LinkedIn" target="_blank"><i class="fa fa-linkedin"></i></a>

                    <a class="nav-item nav-link" href="https://www.linkedin.com/company/1966371/admin/" target="_blank"><i class="fa fa-facebook"></i></a><a class="nav-item nav-link" href="https://www.facebook.com/MrPrint.ca/" target="_blank"><i

                            class="fa fa-twitter"></i></a>

                </div>

</nav>

                    

        </div>

    </div>

</div></header>
#4

Norm … i don;t know what exactly have you changed but all you need to do is to change

data-bs-target="#collapse"

to

data-bs-target="#navbar1_collapse"

so it targets the collapse element id!

<div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">

Also, when pasting code in your posts, make sure to follow:

so it is readable!

#5

Reverted to previous code and just made the one change as directed - all working fine now. Thanks for breaking it down for me so i could understand it better. I will definitely make sure pasted code meets the guidelines next time - sorry about that.