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
Related
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>
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)
Wondering why my Bootstrap toggler isn't working. Viewed a few other thread on a similar issue appearing, but didn't find an appropriate solution since everything seems in order.
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
Frontend Bootcamp\
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
What You'll Learn
</li>
<li class="nav-item">
Questions
</li>
<li class="nav-item">
Instructors
</li>
</ul>
</div>
</div>
</nav>
</html>
if you are questioning why your icon does not appear, it's because of it's color, use text-white class to make it visible (or add .navbar-inverse to your navbar)
if your collapse is not working it's probably because you did not link bootstrap.js in your project
https://jsfiddle.net/mahdiar_mansouri/3u5jvw1d/5/
this fiddle is based on your code, it has the icon visible (two icons actually, one from bs itself another from bootstrap icon package) and it's collapse is working fine
Need help to resolve the bootstrap dropdown navigation issue. I followed all the rules available but I am missing something. Please help.
The service tab has two drop down li which should open when click on the caret. But the website css is not allowing to do so.
<!-- navbar-header -->
<div class="header-nav">
<nav class="navbar navbar-default">
<div class="navbar-header logo">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1>
<a class="navbar-brand" href="http://www.example.com/">Brand Name</a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>SEO Service</li>
<li>Digital Marketing</li>
</ul>
</li>
<li>Projects</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
<div class="contact-bnr-w3-agile">
<ul>
<!--<li><i class="fa fa-envelope" aria-hidden="true"></i>info#example.com</li>-->
<li><i class="fa fa-phone" aria-hidden="true"></i>000000000 </li>
</ul>
</div>
<div class="clearfix"> </div>
</nav>
<div class="clearfix"> </div>
</div>
You have a typo in your code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Here, data-target represents the div that is being targeted for toggling when you click the button. So, it is looking for the div with the ID "bs-example-navbar-collapse-1". This line is fine, though I'd recommend renaming it to something more useful, like "site-nav" or something.
Now, here is where the problem occurs:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
This is the div that you are (correctly) trying to expand/collapse. But you have given it the id "bs-example-navbar-collapse-1 navis", which is not the same as "bs-example-navbar-collapse-1". So, you are clicking the button, but no div is being found with a matching ID.
To solve this, set the ID to "bs-example-navbar-collapse-1" instead (remove "navis"):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Now, all should be right in the world.
Also, far as the jQuery warnings mentioned above, it seems you are loading jQuery 2 already, so you don't need to include 1.12 as well. So make sure you are including the jQuery lib that you want.
I have a header that I plan to use on the top of all my pages. I'd like to keep it in a separate file (something I'm used to doing with php, but I'm new to the world of Bootstrap); however, I am not sure how I would handle dynamically assigning the active class to the nav-item that represents the current page. Does Bootstrap (4) have a baked-in solution for this sort of thing? I've been searching around but haven't found a good solution yet. Thanks in advance!
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="#">My Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap includes some jQuery and is not just CSS. However, you can always run some JavaScript or jQuery on page load that toggles the class based on reading an element when the page is loaded. For example you could:
1) have an identifier on each page (eg. class name inside an element on a page that holds the page's name/value). Example:
<h1 class="page-lookup">
Home
</h1>
2) set you jQuery in a function to read for class and grab the value of the element with a .val(). Example:
const activePage = $(".page-lookup").val()
3) Add an id on each in your navbar to uniquely identify them. Example:
<li id="home-page" class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
4) Run a switch case that looks up the stored value (activePage) for a match. In the case that matches you can run jQuery to update the class to include the "active" syntax that will trigger Bootstrap's formatting.
Example:
switch (activePage) {
case Home:
$('#home-page).attr("class", "nav-item active");
break;
case About:
$('#about-page).attr("class", "nav-item active");
break;
}