Norm
February 3, 2022, 12:08pm
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> <a href="tel:613-967-9553" class="ms-lg-auto ps-lg-2">613-967-9553</a> 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>
Teodor
February 3, 2022, 12:10pm
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.
Norm
February 3, 2022, 12:48pm
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> <a href="tel:613-967-9553" class="ms-lg-auto ps-lg-2">613-967-9553</a> 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>
Teodor
February 3, 2022, 12:55pm
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:
Code Formatting
When pasting code in your posts, please use the following formatting options, in order to be sure your code is readable and well formatted for the rest of the users.
Inline code formatting
Surround a section of code with backticks (`) inline code formatting.
Typing:
`var x = 10;`
Results in:
var x = 10;
This can also be done as var x = 10; inline.
Multi-Line Blocks of Code
Surrounding code with three backticks ``` will allow for code to span multiple lines
Typing:
```
f…
so it is readable!
Norm
February 3, 2022, 1:04pm
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.