I have this one problem regarding the highlighted navbar menu which will only highlight when we clicked on it. For that to work, I'm using javascript. However, each pages has its own sub pages, for example, page Home has a link of local/home, but its content will lead to local/home/content. The sub link will not make the navbar to function The navbar was coded in different file, which I just extends in the home and other pages. I'm not very good at explaining but if I can elaborate more on any part I would do so. Below I attached my JS and my navbar:
HTML :
<ul class="navbar-nav mr-auto" id="nav">
<li class="nav-item">
<a class="nav-link active" href="{{ url('/') }}">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('courses') }}">opportunities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('events') }}">events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('uqalc') }}">courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('contact') }}">contact</a>
</li>
</ul>
JS :
const currloc = location.href;
const menuItem = document.querySelectorAll('a');
const menuLen = menuItem.length;
for (let i = 0; i < menuLen; i++) {
menuItem[i].classList.remove('active');
if (menuItem[i].href === currloc) {
menuItem[i].className = "nav-link active";
}
}
From what I read from your question, you want the navbar to change color when clicked. This can be easily accomplished in two different ways.
The first is making a #Active id that would be given to the proper navbar link on every page. (More here)
The second is if you are staying on the same page but still want the button to change color when clicked. (More here)
Either way is effective.
Have questions? Comment download below. Like my answer? Give me a checkmark and up-vote.
I have a Sidebar / Menu that I am working with. It has been created with Bootstrap, DJango, and Javascript.
Basically, I am trying to write Javascript so that when on clicks on a menu-item, the background changes color (dark blue), the icon change color (light green / turquoise) and it gets a type of "wedge"
Below is an example of a menu-item that has been chosen (Dashboard) along with menu-items that have not been chosen (Security and Messages). The "wedge" has a red arrow pointing to it.
Here is the HTML code that is being used:
[... snip ...]
<div class="page-container">
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-hover-submenu "
data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="nav-item start active open">
<a href="{% url 'mainadmin:dashboard' %}" class="nav-link nav-toggle">
<i class="fa fa-tachometer"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:security' %}" class="nav-link nav-toggle">
<i class="fa fa-users"></i>
<span class="title">Security</span>
<span class="arrow"></span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link nav-toggle">
<i class="fa fa-comment"></i>
<span class="title">Messages</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
<span class="title">List All Messages</span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
<span class="title">List My Messages</span>
<span class="badge badge-danger"></span>
</a>
</li>
</ul>
</li>
[... snip ...]
Here is the Javascript code:
<script>
$(document).ready(function () {
$('.nav-item a').click(function(e) {
$('.nav-item a').removeClass('selected');
$('.nav-item a').removeClass('arrow');
$('.nav-item a').removeClass('open');
$('.nav-item a').removeClass('active');
alert("I have gotten in");
var $parent = $(this).parent();
$parent.addClass('selected');
$parent.addClass('arrow');
$parent.addClass('open');
$parent.addClass('active');
e.preventDefault();
});
});
</script>
I do get the alert message - but - what happens is :
-> the background of the chosen menu-item does change color - which is correct
--> The icon of the chosen menu-item changes color (to light blue / turquoise) - which is correct
-> the tick of the arrow does not take place for the chosen menu-item :(
-> the old chosen menu item does not "de-select"
What am I doing wrong?
TIA
Hi #Joe Lissner
Thanks so much for the response!
I had to add the following to get the "wedge" portion to work. It required span tags
// REFERENCE: https://stackoverflow.com/questions/2013710/add-span-tag-within-anchor-in-jquery
$(this).append('<span class="selected"></span>');
$(this).append('<span class="arrow open"></span>');
While this works when clicking on the main-menu item, I'm not so lucky when it comes to clicking on sub-menu items. As of now, I am pretty much new to Javascript.
How would one get the sub-menu items to work?
Also, when clicking on an item, it does not go to the page specified in "href="
How would can one make changes to the code so that when the menu-item is clicked, it would go to the page specified in "href="
Again, thanks for the response :-)
You are removing the classes from the a tags, not the .nav-item elements.
Try this:
$(document).ready(function () {
$('.nav-item a').click(function(e) {
e.preventDefault(); // best practice to have this first, if you remove this line then the link will function as expected.
var $parent = $(this).parent();
var $arrow = $parent.find('.arrow');
$('.nav-item').removeClass('selected arrow open active'); // simplified
$('.nav-item .arrow').removeClass('open');
$('.nav-item .selected').detach(); // remove the span that was there before
alert("I have gotten in");
$parent.addClass('open active'); // simplified
$arrow.addClass('open').before('<span class="selected" />')
});
});
Edit - Fixed the issue with the arrow
I have following code for nav-pills component:
<ul id="steps" class="nav nav-pills form-steps">
<li class="active"><a data-toggle="pill" href="#options"></a></li>
<li><a data-toggle="pill" href="#payments"></a></li>
</ul>
This is how the look of active a is made (basically it's just a circle filled with special color):
.form-steps > li.active > a {
background-color: #931f2a;
}
And here's code for a regular a:
.promoter-form-steps > li > a {
border: 2px solid #931f2at;
height: 30px;
width: 30px;
border-radius: 100%;
}
I suppose that by adding .active class to corresponding li element makes a element filled with color, but it doesn't when I open modal where this component is placed for the fist time. When I open modal for the second time after I click on another link, I see correct behavior, i.e .active class is filled with color. It's an SPA and I have another nav-pills like this with exact markup and it works just fine and I don't quite understand why this behavior doesn't work on second nav-pills. I double checked that class names and ids don't repeat each others and I am sure that no custom js was involved into this.
Can you please give me a direction to inspect what I did wrong? Thanks in advance!
Here's the recommended format as determined by Twitter Docs:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Your list tags need to have a class of nav-item and your anchors need a class of nav-link before it can use the active class
I'm trying to follow this example.
I've loaded this script:
<script>
// current page highlight
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
</script>
Into the <head> section for these files: index.html (the home page), about.html, and store.html
For this site. Services won't ever need to be highlighted, and Blog and My Account are currently dead links.
Then I added the corresponding class to my CSS:
.active {
color:#337ab7;
}
So when we're on Home (index.html), the Home link should be #337ab7, when we're on About (about.html), the About link should be #337ab7, and when we're on Store (store.html), the store link should be #337ab7.
But right now, still no result. What do I need to change about the JavaScript, CSS, or HTML to make this function apply?
Here's the HTML for the Nav Menu in question:
EDIT: Added active class to the links in question:
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a class="navbar-brand" href="http://nowordpress.gatewaywebdesign.com/">
<img src="assets/images/gatewaylogo.png">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://nowordpress.gatewaywebdesign.com/index.html" class="active">Home <span
class="sr-only">(current)</span></a></li>
<li>About</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
Services
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Website Design</li>
<li>Graphic Design</li>
<li>Promotional Products</li>
<li>Search Engine Marketing</li>
<li>WordPress Conversion</li>
</ul>
</li>
<li>Store</li>
<li>Blog</li>
<li>My Account</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And again here is the link for the live site. Thank you.
SOLUTION
For example, the store page:
HTML:
<li><a class="active" href="/store.html">Store</a></li>
CSS: (.navbar-default .navbar-nav > li > a was overriding the .active class, as mentioned by doutriforce)
.navbar-default .navbar-nav > li > a.active {
color: #337ab7;
}
.navbar-button:hover, a.active {
color: #337ab7;
transition: ease-in-out 0.3s;
}
JavaScript:
// current page highlight
// link color code starts
$(document).ready(function () {
console.log("current page", window.location.href);
$("[href]").each(function () {
$('a[href]:not([href=#])').each(function () {
if (window.location.href.indexOf($(this).attr('href')) > -1) {
console.log($(this).attr('href') +" is active ");
$(this).addClass('active');
}
else {
console.log($(this).attr('href') + "is not active ");
}
});
});
});
// link color code ends
Then be sure to change which <a> link gets the active class based on which page is the active page in your file - i.e. if you're editing login.html, then your HTML will look like this:
<li>Store</li>
<li>Blog</li>
<li><a class="active" href="/login.html">Login</a></li>
If you're editing blog.php, then your HTML will look like this:
<li>Store</li>
<li><a class="active" href="/blog.php">Blog</a></li>
<li>Login</li>
And so on.
Finally, in index.html (the home page), be sure to add a span with class sr-only after the link text, like this:
<li><a href="http://nowordpress.gatewaywebdesign.com/index.html">
Home <span class="sr-only">(current)</span></a></li>
To hide the (current) label with Bootstrap.
Your .active class style is being overwritten by the class .navbar-default .navbar-nav > li > a.
You need to change the CSS selector, being more specific, from just .active to .navbar-default .navbar-nav > li > a .active.
About adding class active only to current accessed href. Try this:
$('ul.nav > li > a').each(function(){
var url = window.location.href; //if comparing with full URL
//var url = window.location.href.pathname; //if comparing with page name (ex. /about.html)
var href = $(this).prop('href');
if (url == href) {
$(this).addClass('active');
}
});
Or, as #Mohamed-Yousef answered, you can just write:
$("a[href*='"+ window.location.href +"']").addClass('active');
If you're always comparing full URL to full Href URL.
No need to use .each() you can just use a selector for this
<script>
// current page highlight
$(document).ready(function() {
$("a[href*='"+ window.location.href +"']").addClass('active');
});
</script>
And if you need to know how a[href*='"+ window.location.href +"'] selector work it simply mean find a tag with href contains window.location.href if you change your href a to something like <a href="/website-design.html"> this selctor won't work .. if this is the case you need to use .each() and .indexOf()
<script>
// current page highlight
$(document).ready(function() {
$('a[href]:not([href=#])').each(function(){
if(window.location.href.indexOf($(this).attr('href')) > -1){
$(this).addClass('active');
}
});
});
</script>
about.html:19 Uncaught SyntaxError: Invalid or unexpected token
there is some weird unicode in line 19 that is throwing a parser error. You can see it in chrome's inspector in the "foreach".
Cleaning that up might fix it.
On "PRODUCTS" click I slide up a white div (as seen in attached). When in responsive (mobile and tablet), I would like to automaticly close the responsive navbar and only show the white bar.
I tried:
$('.btn-navbar').click();
also tried:
$('.nav-collapse').toggle();
And it does work. However in desktop size, it is also called and does something funky to the menu where it shrinks for a second.
Any ideas?
You don't have to add any extra javascript to what's already included with bootstraps collapse option. Instead simply include data-toggle and data-target selectors on your menu list items just as you do with your navbar-toggle button. So for your Products menu item it would look like this
<li>Products</li>
Then you would need to repeat the data-toggle and data-target selectors for each menu item
EDIT!!!
In order to fix overflow issues and flickering on this fix I'm adding some more code that will fix this and still not have any extra javascript. Here is the new code:
<li>Products</li>
<li>Products</li>
Here it is at work http://jsfiddle.net/jaketaylor/84mqazgq/
This will make your toggle and target selectors specific to screen size and eliminate glitches on the larger menu. If anyone is still having issues with glitches please let me know and I'll find a fix.
Thanks
EDIT: In the bootstrap v4.1.3 & v5.0 I couldnt use visible/hidden classes. Instead of hidden-xs use d-none d-sm-block and instead of visible-xs use d-block d-sm-none.
EDIT: In bootstrap v5, Instead of data-toggle use data-bs-toggle and instead of data-target use data-bs-target.
I've got it to work with animation!
Menu in html:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Binding click event on all a elements in navigation to collapse menu (Bootstrap collapse plugin):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
EDIT
To make it more generic we can use following code snippet
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
I think you are all over engineering..
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
EDIT: To take care of sub menus, make sure their toggle anchor has the dropdown-toggle class on it.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
EDIT 2: Add support for phone touch.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
I really liked Jake Taylor's idea of doing it without additional JavaScript and taking advantage of Bootstrap's collapse toggle. I found you can fix the "flickering" issue present when the menu isn't in collapsed mode by modifying the data-target selector slightly to include the in class. So it looks like this:
<li>Products</li>
I didn't test it with nested dropdowns/menus, so YMMV.
just to be complete, in Bootstrap 4.0.0-beta using .show worked for me...
<li>
Products
</li>
I'm assuming you have a line like this defining the nav area, based on Bootstrap examples and all
<div class="nav-collapse collapse" >
Simply add the properties as such, like on the MENU button
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
I've added to <body> as well, worked. Can't say I've profiled it or anything, but seems a treat to me...until you click on a random spot of the UI to open the menu, so not so good that.
DK
This works, but does not animate.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
In the HTML I added a class of nav-link to the a tag of each navigation link.
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
this solution have a fine work, on desktop and mobile.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
Just to spell out user1040259's solution, add this code to your $(document).ready(function() {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
As they mention, this doesn't animate the move... but it does close the nav bar on item selection
For those using AngularJS and Angular UI Router with this, here is my solution (using mollwe's toggle).
Where ".navbar-main-collapse" is my "data-target".
Create directive:
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
return {
restrict: 'C',
link: function (scope, element) {
//watch for state/route change (Angular UI Router specific)
$rootScope.$on('$stateChangeSuccess', function () {
if (!element.hasClass('collapse')) {
element.collapse('hide');
}
});
}
};
}]);
Use Directive:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
This should do the trick.
Requires bootstrap.js.
Example => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
This does the same thing as adding 'data-toggle="collapse"' and 'href="yournavigationID"' attributes to navigation menus tags.
I'm using the mollwe function, although I added 2 improvements:
a) Avoid the dropdown closing if the link clicked is collapsed (including other links)
b) Hide the dropdown too, if you are clicking the visible web content.
jQuery.fn.exists = function() {
return this.length > 0;
}
$(function() {
var navMain = $(".navbar-collapse");
navMain.on("click", "a", null, function() {
if ($(this).attr("href") !== "#") {
navMain.collapse('hide');
}
});
$("#content").bind("click", function() {
if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
navMain.collapse('hide');
}
});
});
Not the newest thread but i searched for a solution for the same Problem and found one (a mix of some others).
I gave the NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
an id / Identifier like:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Not the finest "Idea" - but: Works for me!
Now you can check up the visibility of your button (with jquery) like:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(NOTE: This is just a Code snipped ! I used a "onclick" Event on my Nav Links! (Starting a AJAX Reguest.)
The result is: If the Button is "visible" it got "clicked" ... So: No Bug if you use the "Fullscreen view" of Bootstrap (width of over 940px).
Greetings
Ralph
PS: It works fine with IE9, IE10 and Firefox 25. Didnt checked up others - But i can't see a Problem :-)
This worked for me. I have done like, when i click on the menu button, im adding or removing the class 'in' because by adding or removing that class the toggle is working by default. 'e.stopPropagation()' is to stop the default animation by bootstrap(i guess) you can also use the 'toggleClass' in place of add or remove class.
$('#ChangeToggle').on('click', function (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
Bootstrap 4 solution without any Javascript
Add attributes data-toggle="collapse" data-target="#navbarSupportedContent.show" to the div <div class="collapse navbar-collapse">
Make sure you provide the correct id in data-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.show is to avoid menu flickering in large resolutions
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I found an easy solution for this. Just add the toggle code of the button on the navbar links too.
In the below example is the code data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02".
This will close the menu when clicked and follow the link
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse nav-format-mobile" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <!--https://stackoverflow.com/a/65365121/5763690-->
<li class="nav-item">
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item -->
<a class="nav-link" aria-current="page" [routerLink]="'about'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" [routerLink]="'services'" fragment="why-us" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Overview</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" [routerLink]="'services'" fragment="project" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For companies</a></li>
<li><a class="dropdown-item" [routerLink]="'services'" fragment="startups" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For Startups</a></li>
<li><a class="dropdown-item" [routerLink]="'/services'" fragment="ngos" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For NGOs</a></li>
</ul>
</li>
<li class="nav-item">
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item -->
<a class="nav-link" [routerLink]="'products'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'career'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'contact'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Contact</a>
</li>
</ul>
</div>
You cau use
ul.nav {
display: none;
}
This will by default close the navbar.
Please let me know anybody finds this usefull
If for example your toggle-able icon is visible only for extra small devices, then you could do something like this:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
Clicking [data-toggle="offcanvas"] will add bootstrap's .hidden-xs to my #side-menu which will hide the side-menu content, but will become visible again if you increase the window size.
$('.navbar-toggle').trigger('click');
if menu html is
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
on nav toggle 'in' class is added and removed from the toggle. check if responsive menu is opened then perform the close toggle.
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Tuggle Nav Close, IE browser compatible answer, without any console error.
If you are using bootstrap, use this
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
I tried the other suggestions in my Vue.js 3 app, however my vue-router router-links wouldn't work anymore.
I created a small function to click the menu toggle, if the menu had the "show" class. This worked great for me in all cases.
<template>
...
<div
id="navbarNavigation"
class="collapse navbar-collapse"
>
<ul
class="navbar-nav me-auto mb-2 mb-lg-0"
>
<li class="nav-item">
<router-link
:to="route.url"
class="nav-link"
#click="closeMenu('navbarNavigation')"
>
My route name
</router-link>
</li>
</ul>
</div>
...
</template>
<script>
setup (props) {
const closeMenu = (id) => {
const menuShown = document.getElementById(id).classList.contains('show')
if (menuShown) {
const menuToggle = document.getElementsByClassName('navbar-toggler')[0]
menuToggle.click()
}
}
return { closeMenu }
}
</script>
For peeps looking for a solution concerning Vue 3 router-link with Bootstrap 5 + data-bs-attributes:
Using data-bs-attributes to toggle the nav directly on a Vue-router-link doesn't seem to work - so instead you need to wrap each of your nav-links in a parent element if not already done (an li would be the obvious choice) and apply the relevant data-bs-attributes on that element.
In short - instead of this:
<li class="nav-item">
<router-link
to="/galaxy"
class="nav-link d-flex"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse.show"
>
<v-icon name="gi-galaxy" size="1" class="align-middle" scale="1.5" />
<span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
</router-link>
</li>
Use this:
<li class="nav-item" data-bs-toggle="collapse" data-bs-target="#navbarCollapse.show">
<router-link to="/galaxy" class="nav-link d-flex">
<v-icon name="gi-galaxy" class="align-middle" scale="1.5" />
<span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
</router-link>
</li>