Bug Report: Hamburger Menu Not Working on Mobile (Production + Development) #573
Description
** Bug Report: Hamburger Menu Not Working on Mobile (Production + Development)**
Description
The hamburger menu is not responding in mobile view on both the:
- Production site: https://grass.osgeo.org/
- Local development environment
Observed Behavior
- Hamburger menu button visually works, but the navigation does not toggle.
Possible Cause
The project appears to be primarily built using Bootstrap 4.1.3, which is located in:
static/plugins/bootstrap/
However, I found that some templates are using Bootstrap 5 attributes, such as in file:
themes/grass/layouts/partials/footer.html
Using mixed Bootstrap versions (4 + 5) might be breaking the hamburger toggle functionality.
Possible Fixes
Solution 1 (Bootstrap 4 approach)
Add the required Bootstrap 4 dependencies to the bottom of the navigation template:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>Bootstrap 4 navbar collapse requires jQuery + Popper.js to function correctly.
Solution 2 (Bootstrap 5 approach)
Update the navbar HTML to Bootstrap 5 syntax:
data-bs-toggle="collapse"
data-bs-target="#navigation"And ensure Bootstrap 5 JS is loaded correctly.
Recommendation
Since the entire project is structured around Bootstrap 4, keeping everything consistent with Bootstrap 4 seems safer unless a full migration to Bootstrap 5 is intended.
Let me know what you think about this issue. I am also trying to identify the root cause. Please check the problem on the live website. I will start working on a fix as soon as I hear from you and proceed based on your input. Thank you.