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>
Related
I'm trying to make a responsive navbar that closes when the user clicks outside of it.
On my computer everything works the way it's supposed to: when I resize the window, the navbar collapses and the toggle icon shows, and I'm able to open and close the navbar by clicking on the icon, and I'm able to close it by clicking outside of the menu as well (as desired) thanks to the Javascript.
But when I run the same code on mobile, while the navbar does open and close using the toggle icon, it doesn't collapse when clicked outside of it. So it seems that the JS isn't working here :( Any JS and Jquery I've found elsewhere also tends to mess up my dropdown menu.
Anyone have any ideas what I can do to get the JS to work on mobile? Here's my code on codepen -- if you load it on a mobile device you'll see what I mean (otherwise the code seemingly works fine on computers!)
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="pull-left navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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>
Business
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li class="dropdown">
<i class="fas fa-suitcase"></i> About <span class="caret"></span>
<ul class="dropdown-menu">
<li class = "diff"> <i class="far fa-clock"></i> Store Hours</li>
<li role="separator" class="divider"></li>
<li class = "diff"><i class="fas fa-map-marker-alt"></i> Location & Directions</li>
<li role="separator" class="divider"></li>
<li class = "diff"><i class="fas fa-car"></i> Parking</li>
</ul>
</li>
<li><i class="fas fa-edit"></i> Reviews</li>
</ul>
</div>
</div>
</nav>
JS:
$(document).click(function (event) {
var clickover = $(event.target);
var $navbar = $(".navbar-collapse");
var _opened = $navbar.hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
});
And my CSS is included on codepen. PLEASE HELP if you can, thank you :D
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.
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>