I apologize in advice for being another bootstrap navbar question but I could not find a solution in the questions already answered on here.
Thank you for your help in advance.
Using bootstrap 4.1.3.
Problem: Navbar not collapsing on link click.
The following is a link which is inside of the <head> tag (placed before the style.css, if the matters):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
And here are two scripts placed just before the </body> tag:
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
This is my navbar code:
<nav class="navbar navbar-expand-md navbar-light fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
EDIT:
I see what you're saying now:
Bootstrap has attributes to be applied to the tags in order for the functionality to work correctly on the navbar.
The attributes needed are the data-toggle and data-target attributes.
Change your 'a' tags to look like this:
<a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#reviews">Reviews</a>
working jsfiddle: https://jsfiddle.net/e6cfL9m0/
This question has actually already been answered here:
How to hide collapsible Bootstrap 4 navbar on click
Related
I copied the navbar from the bootstrap navbar documentation, but when I click, the hamburger menu does not work for me, it just does not display the nav items for me.
my hamburger menu
My code in bs-navbar.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<img src="../../assets/images/logo.png" alt="" width="55" height="60"/>
<a class="navbar-brand fw-bold ms-4" href="#">medochek</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Замовити</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакти</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерея</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Про мед</a>
</li>
</ul>
<span class="navbar-text">
+380 66-842-45-32
</span>
</div>
</div>
</nav>
I use Angular so I'm imported bootstrap like this: #import "~bootstrap/dist/css/bootstrap.css" in styles.css
You need the following imports in your framework's import style to be imported for the bootstrap navbar button to work and also for all the styles visible completely.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
The compatible versions of the above links you can check & replace for the bootstrap version you are using.
The second option is you can write your own javascript code to add/remove dynamic CSS active class from your navbar menu.
I'm making a website with Bootstrap and when I use the following code for the navbar and reduce the dimensions of the display, the hamburger menu will not expand down and show the menu options:
<nav class="navbar navbar-expand-lg fixed-top">
Title
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuItems">
<ul class="navbar-nav">
<li class="nav-item"> <a target="_parent" class="nav-item nav-link active" href="index.html"> Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-item nav-link active" href="#about">About</a></li>
</ul>
</div>
</nav>
The button is clickable but it's not showing the dropdown menu. Is it possible that someone can let me know what I'm doing wrong?
Thanks!
Your code is working in the snippet, make sure you have included Bootstrap's JavaScript file as well!
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-lg fixed-top">
Title
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuItems">
<ul class="navbar-nav">
<li class="nav-item"> <a target="_parent" class="nav-item nav-link active" href="index.html"> Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-item nav-link active" href="#about">About</a></li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
Bootstrap's Javascript controls the animations of Bootstrap components like the navbar or the carousel. Link the js files using the script tags. I would prefer not to use the minified versions (files with .min extension)
Spending hours trying to fix issue I am having with toggle menu button. Works perfectly on small screen on index page- but not working on portfolio & contact page. Despite same code & files (jquery & bootstrap files attached in same order). Any suggestions? Here is the website link: https://www.jophilippa.com/
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="portfolio.html"></a><img src="../img/logo.jpg" class="logo" width="200" height="90" alt="Jo Philippa logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="../index.html">ABOUT </a> </li>
<li class="nav-item active"> <a class="nav-link" href="portfolio.html">PORTFOLIO <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="contact.html">CONTACT</a> </li>
</ul>
</div>
</nav>
By quick look at your website & source code, you are linking to your jquery files by relative paths, to be more specific i mean this block of code:
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
This works at https://www.jophilippa.com/ (as it loads https://www.jophilippa.com/js/jquery-3.4.1.min.js), but won't work at https://www.jophilippa.com/pages/portfolio.html, because that loads https://www.jophilippa.com/pages/js/jquery-3.4.1.min.js, which obviously doesn't exist).
Put a / in front of the paths, to make them absolute from the root of website:
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap-4.4.1.js"></script>
how can i get my navbar to expand , i have done everything right , i am using bootstrap4 and jquery source files.
Am i missing something?
Here is my code:
<body>
<nav class="navbar py-3 navbar-light navbar-expand-sm">
first website
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarlink" aria-controls="navbarlink" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarlink">
<ul class="navbar-nav">
<li class="nav-item active">
home
</li>
<li class="nav-item">
skills
</li>
<li class="nav-item">
about
</li>
<li class="nav-item">
projects
</li>
</ul>
</div>
</nav>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
The code works when I test it here using the Bootstrap CDN. My guess is there might be an issue with linking the files. also make sure you have linked the Bootstrap CSS file in your code.
This question already has answers here:
bootstrap 4 nav doesn't display hamburger on resize
(2 answers)
Closed 4 years ago.
I'm currently trying to implement a navbar that turns the navbar selections into a dropdown at small screen sizes (as the documentation shows here. However, the button which should toggle the navbar items displaying is not showing up. It is rendered in the html but the button is empty and upon clicking the button which is responsible for collapsing the navbar, nothing displays (no dropdown of options, where id expect a "home" link and a "login/regiser" button)
Navbar markup:
<nav class="navbar navbar-expand-lg primary">
<a class="navbar-brand" href="/">Blazor Finances</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a>
</li>
</ul>
</div>
</nav>
which works fine on large screen sizes, but looks as follows on small devices:
and a screenshot showing the navbar toggling button is rendered but doesn't seem to be displayed and isn't operable:
Add navbar-light or navbar-dark (for a dark background) to your navbar - these classes are responsible to add the hamburger. See demo below:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light navbar-expand-lg primary">
<a class="navbar-brand" href="/">Blazor Finances</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a>
</li>
</ul>
</div>
</nav>