The navbar on the right collapses when the window is resized, but when I click the toggle button the menu appears. When I click any link, the bar doesn´t "un-toggle"... Can anybody help me?
Site here
Having the menu collapse when a link is clicked is not the default functionality of the expand/collapse menu with bootstrap. If you want it to function that way, you have to bind the hide function .collapse('hide') to the click action for those links.
You can do so by including this:
jQuery(function($){
$('.navbar-default .navbar-nav > li > a').click(function() {
$('.navbar-default .navbar-collapse').collapse('hide')
});
});
Related
I am trying to implement a basic toggle menu after the last has stopped working but no matter how much I try to narrow down the CSS selector, the sub menu items ALWAYS toggle the menu on click for the mobile menu and therefore you cannot click through.
My JS is:
jQuery(document).ready(function() {
jQuery('#menu-item-1837').click(function(e) {
jQuery('#menu-item-1837 > ul').slideToggle(500);
e.preventDefault();
});
});
jQuery(document).ready(function() {
jQuery('#menu-item-1832').click(function(e) {
jQuery('#menu-item-1832 > ul').slideToggle(500);
e.preventDefault();
});
});
I have tried all sorts of variations including targeting using:
#menu-item-1837 a:first-child
.menu-item-has-children > a
a#menu-item-1837
I can't work out why it isn't working
I have also tried variations of targeting the sub-menu but it never works
Any help would be appreciated
I want to toggle navbar when navigating with mobile when the user clicks each one of the navbar items except one which is a dropdown.
I am using this code:
$('.nav a').on('click', function(){
$('.navbar-toggle').click();
});
The problem is that this code toggles the navbar with each item of the navbar on click. However, when I click the dropdown in the navbar, the navbar toggles and the user cannot see items in the dropdown.
I used this and it worked:
$('.nav :not(.dropdown) a') .on('click', function(){
$('.navbar-toggle').click();
});
I have a menu that slides out from the left. I want it so that when a link in the menu is clicked, the menu slides away and then the link is followed. The code below makes the menu slide away, but for some reason the link is ignored and not followed. How can I change this to also follow the link?
// close menu when links in menu are clicked
$(document).ready(function () {
$("#menu-subcat > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
$("#nav-slider").addClass("closed-slide");
$("#nav-slider").removeClass("open-slide");
});
});
You are telling the link not to trigger its default action with this code:
e.preventDefault();
You can remove this (and the surrounding if-statement) or adjust your code so that the link will be followed once your closing animation is done.
I want menu close when click on the link or on ul.
I am using this menu.
You can remove the active class whenever an li in the #menu is clicked like that:
$('#menu li').on('click', function() {
$("#menu,#trigger").removeClass("active");
});
I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.
Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements