I am far from being a JS/jQuery expert and just found a bug on my site. After adding this piece of code to my slider: my bootstrap navigation started to stop working. This is the code of the navigation:
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script> $('#myCarousel').carousel({ interval: 3500 }) </script>
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><br /></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown ">
If I now press to open the navigation I can't close it again and also I can't open the dropdown menus of my navbar.
Related
Please see the html code for the menu at:
https://www.findtaxpro.com/content/img/menufix-ehsan-1.html
There is a problem with the menu, and I don't know how to fix it. When the viewport is small, the mobile menu (hamburger menu) together with the user-icon shows as desired on the upper right hand corner.
However, when the mobile/hamburger menu is clicked immediately followed by the user-icon image, the mobile menu is not closed, and remains open. This lead to a poor user experience. Is there a way to close the mobile/hamburger menu when the user-icon image is clicked immediately after the mobile menu?
Thanks in advance for your time.
Dan
Here I made a fiddle for you. Please check if it works the way you wanted to.
(function($) {
$(".navbar-brand.user-img").on("click", function() {
if ($("#defaultNavbar1").attr("aria-expanded") === "true") { // if hamburger menu already expanded
$("button.navbar-toggle").click(); // click hamburger to collapse back
}
});
})(jQuery);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://www.findtaxpro.com/content/css/custom.css" rel="stylesheet">
<nav class="navbar navbar-default MainMenuBar">
<img src="https://www.findtaxpro.com/Content/img/User.png" class="user-img" />
<ul class="dropdown-menu pull-right" role="menu">
<li><a id="registerLink" href="https://www.findtaxpro.com/Account/Register"><span class="MenuItems">Register</span></a> </li>
<li><span class="MenuItems">Login</span> </li>
</ul>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="https://www.findtaxpro.com"><img class="navbar-brand user-img1" src="https://www.findtaxpro.com/Content/img/logo.png" /></a>
<a class="navbar-brand" href="https://www.findtaxpro.com/Marketing/index"><img class="navbar-brand user-img4" src="https://www.findtaxpro.com/Content/img/ClickHereArtboard 1-8.png" /></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav pull-right">
<li><span class="MenuItems">Search</span></li>
<li><span class="MenuItems">Review</span></li>
<li><span class="MenuItems">Offers</span></li>
<li><span class="MenuItems">Rewards</span></li>
<li><span class="MenuItems">MileTrack</span></li>
<li><span class="MenuItems">Docs</span></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'm sort of new to this, so please forgive me asking, but I'm using a slightly modified bootstrap navbar, and had the active class being properly assigned untill recently, but for some reason it stoped working with the last changes I made... (tried to revert it to see what screwed it up, to no avail...)
Could some gentle soul enlighten me on how to make it work as it should?
Cheers!
T.F.
view:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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>
<a class="navbar-brand" href="#">ACAC</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">INÍCIO<span class="sr-only">(current)</span></li>
<li>NOTÍCIAS</li>
<li>PROJECTO</li>
<li>ACTIVIDADES</li>
<li>GALERIA</li>
<li>CONTACTOS</li>
</ul>
<ul class="nav navbar-nav navbar-right">
EN
</ul>
</div>
</div>
</nav>
.....
<script>
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
Clicking on the menu page navigates to new page. Active menu is changed but when the page is reloaded to new page it is reset to default.
You can check the page on document.ready and set the menu active for that page -
if (window.location.href.indexOf("noticias") > -1) {
$(".nav").find(".active").removeClass("active");
$('.nav a[href$="http://www.base_url.com/notice"]').parent().addClass("active");
}
change http://www.base_url.com/ to your actual base url.
This is your code with hrefs removed and li content changed
none of my edits changed how you code works, and it seems to work fine
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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>
<a class="navbar-brand" href="#">ACAC</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
EN
</ul>
</div>
</div>
</nav>
.....
<script>
$(".nav a").on("click", function() {
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
I have a basic Bootstrap 3 responsive nav like so:
<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span
class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<a class="navbar-brand" href="#"><strong>brand</strong></a></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Homepage</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">page-1</a>
<ul class="dropdown-menu">
<li>page-1-1</li>
<li>page-1-2</li>
</ul>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</body>
When I click the dropdown menu button in collapsed mode, navbar is closing and I cannot see the dropdown menu.
When I open nav:
and clicked Page-1:
It should open a dropdown menu below Page 1 but when I click Page-1 it closes nav. How can I solve this problem?
Okay so I'm trying to create a navbar that collapses the hamburger menu when a link is closed. The problem is the method I'm using also opens the hamburger menu when I click a link. This is okay with all the regular links in the navbar. But I do not want this to happen with the navbar-brand. I need it to only collapse the menu when it's opened. However, even when the menu is closed the navbar-brand on click will open it.
here is the code, I tried all sorts of javascript but I think I need help with my specific situation.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar"><img style="height:31px; width:170px;" src="images/img.svg"></a>
<!-- Start Collapse Button -->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT</li>
<li>CLOUD</li>
<li>HIPAA</li>
<li>SECURITY</li>
<li>CONTACT US</li>
<li>ABOUT</li>
</ul>
</div>
<!-- End Links -->
</div>
You can hook up to the click event of the hamburger and reset the css classes on the menu
$('.navbar-brand').click(function() {
$('.navbar-toggle').attr('aria-expanded', false);
$('.navbar-toggle').addClass('collapsed');
$('.navbar-collapse').attr('aria-expanded', false);
$('.navbar-collapse').addClass('collapse');
$('.navbar-collapse').removeClass('in');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar">
<img style="height:31px; width:170px;" src="http://lorempixel.com/170/31" />
</a>
<!-- Start Collapse Button -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT
</li>
<li>CLOUD
</li>
<li>HIPAA
</li>
<li>SECURITY
</li>
<li>CONTACT US
</li>
<li>ABOUT
</li>
</ul>
</div>
<!-- End Links -->
</div>
I have a functioning bootstrap navbar through use of ui.bootstrap of Angular-UI. For the mobile navbar, I want the navbar to collapse when a link is clicked. The toggle button functions as expected, but I can't get the ng-click="isCollapsed = !isCollapsed" to work on the nav links.
<div class="navbar navbar-default navbar-fixed-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
App
</div>
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}" ng-click="isCollapsed = !isCollapsed">{{item.title}}</a>
</li>
</ul>
</div>
</div>
</div>
In my controller, the applicable code is:
$scope.isCollapsed = true;
I had the same issue. Not sure if this is the best solution but I just added this in the main controller:
$rootScope.$on('$stateChangeStart', function(event, toState){
$scope.navbarCollapse = true;
});
It doesn't exactly do what you ask, because it's not triggering the collapse on click event. But it does trigger the collapse on each state change which for this purpose is the same.