This question already has answers here:
Navbar dropdown (collapse) is not working in Bootstrap 5
(11 answers)
Closed 6 months ago.
I upgraded from bootstrap 4.6 to 5.2 Everything looks fine, only the menu drop down does not work so the choices available can not be made. I reduced the problem to two menu choices: the drop down and a simple link. The simple link ('Home') works fine. The dropdown does not drop to show the elements. What is wrong here?
NB: the menu has not been changed wrt bootstrap 4.6 (apart from the mr-auto was ml-auto). None of the dropdowns works.
NB: compare this example: https://getbootstrap.com/docs/5.0/components/navbar/
Please note that the answers can be found elsewhere on stackoverflow but the most understanding for me comes from here: What is the difference between Bootstrap data-toggle vs data-bs-toggle attributes?
<script defer src='https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css'>
<nav class='navbar navbar-default navbar-expand-lg '>
<div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
<ul class='navbar-nav mr-auto'>
<li class='nav-item dropdown'>
<a class='nav-link dropdown-toggle' href='#' id='navbarDropdownAbout' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>About</a>
<div class='dropdown-menu' aria-labelledby='navbarDropdownAbout'>
<span class='nav-link' data-toggle='modal' data-target='#CUserAbout'>This Site</span>
<span class='nav-link' data-toggle='modal' data-target='#CUabout'>Utils</span>
<span class='nav-link' data-toggle='modal' data-target='#CUlicense'>License</span>
<a class='nav-link' href="https://wikipedia.org/" target="_blank">Wiki</a>
</div>
</li>
<li class='nav-item'> <span class='nav-link' onclick="function('charts.txt', true);">Home</span> </li>
</ul>
</div>
</nav>
Here you go...
Change data-toggle='dropdown' (Bootstrap 4.6) to data-bs-toggle='dropdown' (Bootstrap 5.2).
Note: Be careful, the link you've provided above is for Bootstrap 5.0, not 5.2.
See the snippet below.
<script defer src='https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css'>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class='navbar-nav mr-auto'>
<li class='nav-item dropdown'>
<a class='nav-link dropdown-toggle' href='#' id='navbarDropdownAbout' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>About</a>
<div class='dropdown-menu' aria-labelledby='navbarDropdownAbout'>
<span class='nav-link' data-toggle='modal' data-target='#CUserAbout'>This Site</span>
<span class='nav-link' data-toggle='modal' data-target='#CUabout'>Utils</span>
<span class='nav-link' data-toggle='modal' data-target='#CUlicense'>License</span>
<a class='nav-link' href="https://wikipedia.org/" target="_blank">Wiki</a>
</div>
</li>
<li class='nav-item'> <span class='nav-link' onclick="function('charts.txt', true);">Home</span> </li>
</ul>
</div>
</div>
</nav>
Related
This is a similar question to How can I make navbar items with vue-router-links to toggle the navbar? but I am not allowed to comment there, and the solution given doesn't work me anyway.
I am using Vue 3 and Bootstrap 5 and the following code works exactly as the standard Bootstrap code does i.e. toggling the hamburger menu opens and closes the menu but clicking a link does nothing (other than correctly route to the page being clicked, meaning user has to then tap hamburger menu again to close)
NavBar component:
<template>
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="container-fluid">
<router-link class="navbar-brand" to="/">Birch Farm</router-link> |
<button class="navbar-toggler" type="button"
:class="visible ? null : 'collapsed'"
data-bs-toggle="collapse"
data-bs-target="#navContent"
aria-controls="navContent"
:aria-expanded="visible ? 'true' : 'false'"
#click="visible = !visible"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item active">
<router-link class="nav-link px-3" active-link="active" to="/" #click="visible = !visible">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link px-3" to="/camping" #click="visible = !visible">Camping & Caravanning</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link px-3" to="/fishing" #click="visible = !visible">Cat Rough Fishery</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link px-3" to="/contact" #click="visible = !visible">Contact Us</router-link>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script setup>
import {ref} from 'vue'
const visible = ref(false);
</script>
<script>
export default {
name: "NavBar",
created() {},
data() {},
props: {},
methods: {},
components: {}
};
</script>
<style lang="scss" scoped></style>
Not having any of the 'visible' stuff works exactly the same way - this was added when trying the solution given in the above link.
"toggling the hamburger menu opens and closes the menu but clicking a link does nothing (other than correctly route to the page being clicked"
That's how the Bootstrap Navbar works. It doesn't collapse/hide automatically after clicking a link. Normally you'd have to do something like this to close the Navbar after clicking a link.
But when using Vue you would toggle the collapse class as needed on the navbar-collapse div using your visible value...
<div class="navbar-collapse" :class="!visible?'collapse':''" id="navContent">
Demo: https://codeply.com/p/lHTzN4amfe
You have to follow this guide if you are using bootstrap via NPM. As long as I see, the way to use it is different in Angular or React, for example.
In addition to that, if you want to use bootstrap in your project and set it up the easiest way possible, is to use the CDN, I will show you how:
In your main layout, inside the head tag, put this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
And inside your body tag, this:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
I had the same issue, bootstrap (5.1.3) and Vue (3.2.36). So I installed bootstrap-vue-3 (0.1.13) and use and to make it work.
Also without "navbar-light bg-light) the hamburger icon didn't appear at first.
Hope this helps.
<template>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container-fluid">
<RouterLink class="navbar-brand" to="/">
<img class="logo" src="../assets/svg/logo.svg" />
</RouterLink>
<b-button
v-b-toggle.collapse-1
variant="primary"
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>
</b-button>
<b-collapse id="collapse-1" class="mt-2 collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<RouterLink class="nav-link" to=" /">home </RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" to=" /something"
>something
</RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" to="/about"
>about
</RouterLink>
</li>
</ul>
<form class="d-flex">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</b-collapse>
</div>
</nav>
I changed data-toggle to data-bs-toggle and data-target to data-bs-target and it worked.
My main.js(main entry file) has this
...
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
...
I found a tweak in this other thread for Vue 3 / Bootstrap 5 / vue-router :
How to hide collapsible Bootstrap navbar on click
Adding a simple span tag around menu label and inside li / routerling worked for me:
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<RouterLink class="nav-link" to="/"><span data-bs-target="#navigation" data-bs-toggle="collapse">Menu 1</span></RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" to="/ventes.html"><span data-bs-target="#navigation" data-bs-toggle="collapse">Menu 2</span></RouterLink>
</li>
</ul>
I hope it helps!
I thought to share my workaround/solution for this specific issue.
Do not use the router-link component, rather trigger the navigation manually via the push method in vue-router by handling the click event in vue.
This allows for a "static" layout of the HTML so that you can preserve the functionality in Bootstap which allows for controlling the collapsing of the navbar via data attributes.
In order to trigger the active navigation style you can use class binding in vue and the route.name value from vue-router. It would also work with the path given slight modification.
Here is a basic example:
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const navigate = name => router.push({ name })
</script>
<template>
<div class="container">
<span class="navbar-brand">EXAMPLE NAVBAR</span>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item">
<span :class="['nav-link', route.name === 'camping' ? ' active' : '']"
role="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
#click="navigate('camping')">CAMPING</span>
</li>
<li class="nav-item">
<span :class="['nav-link', route.name === 'fishing' ? ' active' : '']"
role="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
#click="navigate('fishing')">FISHING</span>
</li>
</div>
</div>
</div>
</template>
<li class="nav-item mx-1">
<NuxtLink class="btn nav-button nav-text" to="/eventi">
<span data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse">Servizi</span>
</NuxtLink>
</li>
I solved adding a span tag with data-bs-target="#navbarSupportedContent" and data-bs-toggle="collapse" around the name of the links (in my case they are NuxtLink but I think works either with Router-link)
I'm doing an app on rails and I have a problem with my navabar.
I took it on bootstrap and when I click on one of my links it works only the first time, if I click in an other link it redirect me to the home section. I have to actualize to make link work again but again only for the first click.
Do you have a solution for that ?
Here is my code :
<nav class="navbar fixed-top navbar-expand-lg ">
<h3 class="navbar-brand"></h3>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<%=link_to "Accueil", '#view', class:"nav-link"%></li>
<li class="nav-item">
<%=link_to "A propos", '#about', class:"nav-link"%>
</li>
<li class="nav-item">
<%=link_to "Compétences", '#skills', class:"nav-link"%>
</li>
<li class="nav-item">
<%=link_to "Etudes", '#education', class:"nav-link"%>
</li>
</ul>
</div>
</nav>
My four section have an id with the right name.
Thanks a lot.
EDIT : Thank you all, I find the answer.
I had a old link to a .css file that didn't exist anymore in my . When I erase it the navbar works.
My mistake !
Try use <li><%= link_to "Etudes", product_path(anchor: 'education') %></li> instead of <li><%=link_to "Etudes", '#education'%></li>
From the docs
i am new in bootstrap and having some difficulty in navbar (mobile view). i have added a navbar and added a toggle button, but it doesn't seems to be working perfectly. i am following the steps as told in tutorials and examples but still don't get the result right. navbar is toggling but when i click the toggle button, it toggles in and off simultaneously. also the toggle button is visible even on larger screen.
here's my code
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar-menu" class="collapse navbar-collapse">
<nav id="nav-area">
<ul class="nav-bar-list">
<li>
<a>About</a>
</li>
<li>
<a>Blog</a>
</li>
<li>
<a>Tools</a>
</li>
<li>
<a>Services</a>
</li>
<li class="contact-button">
<a>Contact</a>
</li>
</ul>
</nav>
</div>
please tell me where i am doing it wrong? i am using bootstrap version 4.0
It works fine when I copied your code to this snippet. Are you sure you included the bootstrap js & css files along with jquery in your code? If so, then something else that you haven't posted must be interfering.
You need to add your own css to hide it on a larger screen.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar-menu" class="collapse navbar-collapse">
<nav id="nav-area">
<ul class="nav-bar-list">
<li>
<a>About</a>
</li>
<li>
<a>Blog</a>
</li>
<li>
<a>Tools</a>
</li>
<li>
<a>Services</a>
</li>
<li class="contact-button">
<a>Contact</a>
</li>
</ul>
</nav>
</div>
I've been having trouble getting my bootstrap toggle button to display menu items 'What We Do', 'About', or 'Contact' when clicked. It collapses properly but will not work when clicked.
I've played around with as many things as I know how to fix it, but cannot figure it out.
<!--Logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ACS</a>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">What We Do</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>
</div>
The menu is not correctly linked to the button in your code. What is appearing as ACS is the link, however this link is not targeted at the menu, the button is.
I have included a snippet. You only need some minor changes to make it work.
(btw, I only noticed now, it uses bootstrap 3.36 - I created the snippet using jsbin originally using 'Bootstrap latest' library!)
.navbar-header button {
color: #337ab7;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-brand" data-toggle="collapse" data-target="#mainNavBar">ACS
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div id="mainNavBar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">What We Do</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>
</div>
You should always ensure that, when adding your script files or cdn, you put the jquery.js file or cdn link before the bootstrap.js file or cdn link.
You can read more on it on the official website of bootstrap: https://getbootstrap.com/docs/4.2/getting-started/introduction/
The menu drop downs for a brief second and then goes back up. Can anyone please help in fixing it? If someone could suggest me a code to make it work then that would be even better.
This is the code:
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
You are using Bootstrap version 2.3.2 CSS with Bootstrap version 3.3.6 Javascript. They are not compatible with each other. You need to use the same version of Bootstrap for both CSS and Javascript to get the correct behavior.
(It would have been helpful if you had included the URL to the site you need help with.)
Here you go with a solution https://jsfiddle.net/wqy986bt/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</nav>
There are few things:
You have an extra closing div at the end of your code
Check the ordering of the library file
bootstrap CSS
jQuery
bootstrap JS
I've used bootstrap v3.3.7 and jQuery v2.1.1 (in snippet) and jQuery v2.2.4 (in jsfiddle)
Hope this will help you.