I would like to use an accordion inside a bootstrap dropdown with up direction ("dropup") and make the menu expand upwards.
I managed to setup the "accordion" inside the dropdown as you can see in the code example.
Here is the html
<div class="dropup" id="dropdownUp">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="btnGroup"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroup" id="dmenu">
<a class="dropdown-item keepopen" href="#c_1" data-toggle="collapse">Category 1</a>
<ul class="collapse" id="c_1" data-parent="#dmenu">
<li>Child 1-1</li>
<li>Child 1-2</li>
<li>Child 1-3</li>
</ul>
<a class="dropdown-item keepopen" href="#c_2" data-toggle="collapse">Category 2</a>
<ul class="collapse" id="c_2" data-parent="#dmenu">
<li>Child 2-1</li>
<li>Child 2-2</li>
</ul>
<a class="dropdown-item keepopen" href="#c_3" data-toggle="collapse">Category 3</a>
<ul class="collapse" id="c_3" data-parent="#dmenu">
<li>Child 3-1</li>
</ul>
</div>
</div>
And here is the javascript
$(document).ready(function() {
$('#dropdownUp').on('hide.bs.dropdown', function(e) {
if ($(e.clickEvent.target).hasClass('keepopen')) {
return false;
}
return true;
});
$('#dropdownUp').on('hidden.bs.dropdown', function() {
$('.dropdown-menu .collapse.show').collapse('hide');
});
});
Here the link to the example
https://jsbin.com/cirejudipu/edit?html,js,output
The problem is, when the collapse expands, the dropdown menu goes over the button. Is there a way to make the accordion and the dropdown menu expand upwards? Thank you.
you could use the transform/rotate CSS property to force the element to turn upside down. you may need to use the same property on the contents to flip them right side up. I've used this on animated CSS/JS apps as well as on flipping entire canvas projects sideways.
here is the line of CSS
transform: rotate(180deg);
let me know if that helps
An issue that’s been bugging me for a while is that by default in the mobile menu of my theme, ALL menu items auto expand so it makes it hard to navigate if you have a lot of sub-menu items.
I’m trying to have my sub-menu items collapse with a drop-down arrow. Something that seems fairly simple but there are no options for adjust this in WordPress.
I managed to find some code in Header.php that you will find below
Any ideas how I can modify this code to have my sub-menu items collapse with a dropdown arrow?
Thanks
Christian
You can do it easily by Bootstrap:
Bootstrap Dropdowns
or, You can also hide dropdowns in css:
li ul{
display: none;
}
and show it on arrow click using jQuery:
$("li a").click(function(){
$(this).parent().find("ul").toggle();
});
Demo:
https://codepen.io/seyyedmojtaba72/pen/VOgmdE
Pure js
let arr=[...document.querySelectorAll(".toggle")];
arr.map(a=> a.onclick = e => {
a.nextElementSibling.classList.toggle('hide');
a.innerHTML = a.innerHTML=='→' ? '↓' : '→';
});
.hide { display: none }
.toggle { cursor: pointer}
<nav>
<ul id='menu'>
<li><a class='home' href='/'>Home</a></li>
<li>
<a class='prett' href='#' >SubMenu A</a>
<span class="toggle">→</span>
<ul class='submenus hide'>
<li><a href='#' >Dropdown 1</a></li>
<li><a href='#' >Dropdown 2</a></li>
</ul>
</li>
<li>
<a class='prett' href='#' >SubMenu B</a>
<span class="toggle">→</span>
<ul class='submenus hide'>
<li><a href='#' >Dropdown 3</a></li>
<li><a href='#' >Dropdown 4</a></li>
</ul>
</li>
<li><a class='home' href='/'>Back</a></li>
</ul>
</nav>
Sorry I had a hard time figuring out how to paste code without errors. Here is my code below. Any way to modify this code to have a collapsible drop down menu on mobile devices?
<!– Toggle button for Main Navigation on mobile –>
<button class=”btn btn-primary header__navbar-toggler hidden-lg-up js-sticky-mobile-option” type=”button” data-toggle=”collapse” data-target=”#shaka-main-navigation”><i class=”fa fa-bars hamburger”></i> <span><?php esc_html_e( ‘MENU’ , ‘shaka-pt’ ); ?></span></button>
<!– Main Navigation –>
<nav class=”header__navigation collapse navbar-toggleable-md js-sticky-desktop-option” id=”shaka-main-navigation” aria-label=”<?php esc_html_e( ‘Main Menu’, ‘shaka-pt’ ); ?>”>
<?php
if ( has_nav_menu( ‘main-menu’ ) ) {
wp_nav_menu( array(
‘theme_location’ => ‘main-menu’,
‘container’ => false,
‘menu_class’ => ‘main-navigation js-main-nav js-dropdown’,
‘walker’ => new Aria_Walker_Nav_Menu(),
‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s” role=”menubar”>%3$s‘,
) );
}
?>
<?php
I have created a nested drop down menu like this:
And I have my code for it.
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products <span class="caret">
</span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">Women <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Blouse</li>
<li>Sweater</li>
</ul>
...
</li>
</ul>
</li>
With my Style
.dropdown-submenu {
position: relative;}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;}
However when I click the drop down button, and click the other drop down, the previous ones doesn't close, therefore it will keep overlap. How do I make the list close it up?
One thing you can try is use jQuery to emulate the user "clicking" anywhere else on the body e.g.
$("body").trigger("click");
I understand that since that since the release of Bootstrap 3, multi-level/multi-tier navigation is no-longer officially supported out of the box. I don't understand why they have made this decision as it seems like a pretty stupid move to me but currently I am trying to restore this functionality/behaviour within my site.
Here is the html for my bootstrap navigation menu:
<nav id="topNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle grouped for better mobile display-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">Menu</a>
</div>
<!-- Content that requires toggling on mobile devices-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav level2">
<li class="active">Home</li>
<li>Blog</li>
<li>
<a class="hidden-xs" href="/destinations/">Destinations</a>
<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdown">Destinations <b class="caret"></b></a>
<ul class="dropdown-menu level3">
<li class="dropdown-submenu">
<a class="hidden-xs" href="/destinations/europe-the-caucasus/">Europe & the Caucasus </a>
<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">Europe & the Caucasus <b class="caret"></b></a>
<ul class="dropdown-menu level4">
<li>Albania</li>
<li>Armenia</li>
<li>Azerbaijan</li>
<li>Georgia</li>
<li>Europe's Arctic Circle</li>
<li>Romania</li>
<li>Turkey</li>
<li>Montenegro</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="hidden-xs" href="/destinations/north-africa/">North Africa</a>
<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">North Africa <b class="caret"></b></a>
<ul class="dropdown-menu level4">
<li>Egypt</li>
<li>Libya</li>
<li>Morocco</li>
<li>Mali & Burkina Faso</li>
<li>Sudan</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Currently, I have managed to restore the multi-level navigation functionality for the desktop using hover effects in pure css:
#media (min-width: 992px){
/*Add multi-level navigation support*/
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:-2%;left:99.5%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;margin:0;padding:0}
.dropdown-submenu:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {display: block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:active>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.navbar-nav > li:hover > ul.dropdown-menu,
.navbar-nav > li:hover > ul.dropdown-menu > li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
background-color: #FFA050;
}
.navbar-nav > li:hover ul li a:hover,
#topNavigation .navbar-nav > li.active ul li a:hover{
background-color: #451F00;
color: #FFA050;
}
#topNavigation .navbar-nav > li.active ul li a {
background-color: #FFA050;
color: #451F00;
}
}
This gives the following effect:
However, on mobile devices there seems to be a bit of an issue which I believe is caused by the data-toggle attributes.
The menu looks correct as you can see above however, when I click on one of the continents which should trigger the collapsed list of countries to open, it instead collapses the destinations dropdown wihtout displaying any the next tier of navigation.
My main question is, how can I adapt my code to ensure that the data-toggle attribute is targeting the correct menu exposing the content underneath? I've tried replacing the value in the data-toggle but this doesn't actually seem to be doing anything and exhibits the same behaviour no matter what is put here.
Any help will be greatly appreciated. I'll also put together a fiddle to try and demonstrate the issue more clearly.
N.B. I've also tried following the tips in the link below but unforunately they don't seem to change the behaviour for mobile-sized screens at all:
http://www.jeffmould.com/2014/01/09/responsive-multi-level-bootstrap-menu/
Looking at the bootstrap dropdown source, it seems that boostrap attaches an event that triggers the a function that hides all dropdown-menu, when a dropdown item is clicked. If we stop that event from running and toggle the visibility ourselves when clicking a dropdown toggle, it should work. So something like:
//might be selecting too many things
$(".level3 .dropdown-toggle").click(function(e){
$(this).closest('li').toggleClass('open') //show dropdown
e.stopPropagation(); //stops from hiding menu
})
Example
I haven't tested how this code affects anything else, but I suppose it's a good start.
You have data-toggle set as "dropdownTwo" here.
<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">North Africa <b class="caret"></b></a>
In the Bootstrap JS docs it is stated that:
data-toggle="dropdown" still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.
As your toggle isn't "dropdown" but "dropdownTwo", Bootstrap doesn't know what to target.
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>