Bootstrap
Bootstrap Navbar burger toggle not working in Safari #32773
Unanswered
natasha-benyak
asked this question in
Q&A
Replies: 1 comment
-
|
I seem to be experiencing something similar, although my issues aren't limited to Safari. I'm using Bootstrap 5.0 Beta 2 and collapse components don't seem to work at all. Below is the code I'm working with (file type is <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="stylesheet" href="/styles/app.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora"/>
<title>#(title)</title>
</head>
<body>
<header class="gl-header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">#(brandName)</a>
<button class="navbar-toggler collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="navbar__right collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="main-content container">
#import("body")
</div>
</main>
<footer class="gl-footer mt-4 pt-2 pb-2 border-top text-center">
<div class="container">
Copyright © #(brandName) 2021. All Rights Reserved.
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="/js/app.js"></script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Hello,
Im using Bootstrap 4. My navbar is working beautifully in all browsers apart from Safari. When collapsed (on small screens) the burger-menu icon is not clickable. I tried a few solutions that I could find online, but nothing seem to solve my problem.
I would appreciate if someone could point me towards the right direction. I am puzzled to what Im doing wrong.
Many thanks in advance!
<nav class="navbar navbar-nav navbar-expand-lg navbar-light bg-light fixed-top" > <div class="container-fluid"> <div class="custom-wrapper"> <a class="navbar-brand" href="#services">Web Development</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-menu" aria-controls="my-menu" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="my-menu"> <div class="navbar-nav mr-auto"> <a class="nav-link active" href="./index.html">Home</a> <a class="nav-link" href="./about.html">My Work</a> <a class="nav-link" href="./pricing.html">Pricing</a> <a class="nav-link" href="./contact.html">Contact</a> </div> </div> </div> </div> </nav>Beta Was this translation helpful? Give feedback.
All reactions