Hamburger Menu

Forum|Forum|1 year ago
May 18, 2024
2 replies
621 views

Hamburger Menu not working on mobil device once you scroll down page

This topic has been closed for replies.

Nancy OShea

Community Expert

The menu works as expected for me in the latest desktop Firefox.

On which devices are you testing and seeing problems?

Also these errors need fixing.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwellness4d.com%2Findex.html

Nancy O'Shea— Product User & Community Expert

M

Michael37484358qnwlAuthor

Participant

Iphone

BenPleysier

Community Expert

For what it's worth, I quit using jQuery due to poor performance on some devices.

This navbar and layout are built entirely with Bootstrap 5. No other add-ons needed.

It works well in all devices I've tested.

Working code:

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.3.2 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Minified Bootstrap 5 CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!--Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">

<!--latest minified Bootstrap JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
//Script for Modal Carousel Gallery
var myCarousel = document.querySelector('#carouselControls')
var myModalEl = document.getElementById('#myModal')

myModalEl.addEventListener('show.bs.modal', function (event) {
    const trigger = event.relatedTarget
    var bsCarousel = bootstrap.Carousel.getInstance(myCarousel)
    bsCarousel.to(trigger.dataset.bsSlideTo)
})
</script>

<!--My Styles-->
<style>
/**allow ample room for top navbar**/
body {padding-top:150px}

.navbar a {font-size: 1.35rem}
.navbar i {font-size:2rem}
a {color: tomato}
.modal-dialog {max-width:950px}
</style>
</head>
<body class="d-flex flex-column min-vh-100">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">

<div class="container-fluid">
<a class="navbar-brand" href="#"><img class="rounded-circle" src="https://dummyimage.com/125x125&text=Brand/Logo" alt="Brand/logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-house"></i> Home</a>
</li>
<!--Begin Dropmenu-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><i class="bi bi-gear"></i> Dropmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
<!--end dropmenu-->
<li class="nav-item" title="Video">
<a class="nav-link" href="#"><i class="bi bi-film"></i></a>
</li>
<li class="nav-item" title="Instagram">
<a class="nav-link" href="#"><i class="bi bi-instagram"></i></a>
</li>
<li class="nav-item" title="Facebook">
<a class="nav-link" href="#"><i class="bi bi-facebook"></i></a>
</li>
<li class="nav-item" title="Contact">
<a class="nav-link" href="#"><i class="bi bi-envelope"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<!--end navbar-->
<div class="container-fluid mt-3">
<div class="row">
<div class="col">
<h1>Bootstrap 5 Modal Carousel</h1>
<p>Basic gallery, no add-ons required.</p>
<!--MODAL CAROUSEL GALLERY-->
<!--list of thumbnails-->
<div class="list-group list-group-horizontal">
<a data-bs-toggle="modal" data-bs-target="#myModal">
<div class="list-group-item text-center">
<img class="img-thumbnail" src="https://dummyimage.com/200x133/000/ff0" data-bs-slide-to="0" alt="..."><br>
Caption</div></a>

<a data-bs-toggle="modal" data-bs-target="#myModal">
<div class="list-group-item text-center">
<img class="img-thumbnail" src="https://dummyimage.com/200x133/999/fff" alt="..." data-bs-slide-to="1"><br>
Caption</div></a>

<a data-bs-toggle="modal" data-bs-target="#myModal">
<div class="list-group-item text-center">
<img class="img-thumbnail" src="https://dummyimage.com/200x133/ddd/f00" alt="..." data-bs-slide-to="2"><br>
Caption</div></a>
<!--end of thumbnails--></div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">
My Gallery Title</h1>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!--CAROUSEL GOES HERE-->
<div id="carouselControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4500">
<div class="carousel-inner overflow-hidden">
<div class="carousel-item active">
<img class="img-fluid" src="https://dummyimage.com/900x500/000/ff0" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide description.</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="https://dummyimage.com/900x500/999/fff" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Next slide description.</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="https://dummyimage.com/900x500/ddd/f00" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Last slide description.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="modal-footer">
<small>Placeholders from 
<a href="https://dummyimage.com">DummyImage.com</a>
</small>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Jumbotron from top-->
<div class="container">
<div class="row">
<div class="mt-4 p-5 bg-secondary text-light rounded">
<h3>Collapsible Navbar + Bootstrap Icons</h3>
<p>Navigation bar is hidden on small screens and replaced by a button in the top right corner. Click/tap button to reveal vertically stacked links.</p>
<h3>Bottom Footer</h3>
<p>On short pages, footer hugs page bottom.</p>
<h4 class="mt-3">
<a href="https://www.w3schools.com/bootstrap5/index.php">Bootstrap 5 Tutorials</a>
</h4>
<h4 class="mt-3">
<a href="https://diegomariano.com/bootstrap-icons-cheat-sheet/">Bootstrap Icons Cheat Sheet</a>
</h4>
</div>
</div>
</div>

<!--Begin Document Footer-->
<div class="container-fluid mt-auto">
<footer class="row bg-dark text-light">
<div class="mt-4 p-4">
<small>Footer<br>
XYZ Company  |  1400 5th Ave, New York, NY | Tel: 123-456-7890<br>
©2024 all rights reserved.</small>
</div>
</footer>
</div>
</body>
</html>

For what it's worth, I quit using jQuery due to poor performance on some devices.

This navbar and layout are built entirely with Bootstrap 5. No other add-ons needed.

It works well in all devices I've tested.

By @Nancy OShea

In total agreeance 👍

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

There's something wrong with your code.

If you want better answers, you'll need to post the URL to your online page for us to examine.

In the meantime, validate HTML & fix reported errors & warnings.

https://validator.w3.org/

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded