Hello all,
I am trying to make a navbar disappear after being clicked (It also has a sub menu dropdown). I tried using this (in fact it worked for a while but now does not). Any help would be appreciated, David
<script type="text/javascript">
<!--Make the menu collapse on option click in mobile mode-->
jQuery(document).ready(function () {
jQuery(".nav .dropdownmenu, .navbar-header .dropdownmenu").click(function(event) {
// check if window is small enough so dropdown is created
jQuery(".navbar-collapse").removeClass("in").addClass("collapse");
});
});
</script>
This is the dropdown menu
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<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>
<img src = "images/logo.png" height="30px" style="margin-top: 10px; margin-left: 5px;">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdownmenu active">Home</li>
<li class="dropdownmenu">Sales</li>
<li class="dropdownmenu">Lettings</li>
<li class="dropdownmenu">Financial Services</li>
<li class="dropdown">
Branches <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdownmenu" data-toggle="modal" data-target="#northwichModal"><a >Northwich</a></li>
<li class="dropdownmenu" data-toggle="modal" data-target="#middlewichModal">Middlewich</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#winsfordModal">Winsford</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#lettingsModal">Northwich Lettings</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Related
please refer "https://codepen.io/anon/pen/XbBPPY" i want same result but instead of using bootstrap-3, i want to use bootstrap-4.
U can see the code in the reference link "https://codepen.io/anon/pen/XbBPPY"
HTML
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active">Link</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
<li class="dropdown">
Drop-Down Menu<i class="fa fa-angle-down flipped"></i>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<i class="fa fa-microphone fa-2x"></i>Option
</li>
<li class="nav-link">
<i class="fa fa-newspaper-o fa-2x"></i>Option
</li>
</ul>
</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>```
I've been trying to replicate the icons part in the navigation bar on this website https://www.vannuysmaserati.com/
This is what I have so far. I'm not using icons yet. I would like the dropdowns to use one dropdown menu not have one for each.
https://codepen.io/dmads2355/pen/bQPgbJ
<br>
<br>
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
P <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<p>phone</p>
</ul>
</li>
<li class="dropdown">
H <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<p>Hours</p>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
Thanks
i am using following nav code in my nav view
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="index.php">
<img src="img/logo.png" class='img-responsve' alt='Transskilks'/>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="socialnav">
<li>Home</li>
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Talent Acquisition</li>
<li>Consulting & Advisory</li>
<li>Global Payroll Outsource</li>
<li>Time and Attendance System</li>
</ul>
</li>
<li>Contact</li>
<li><i class="fab fa-facebook-f"></i></li>
<li class="active"><i class="fab fa-twitter"></i></li>
<li class="active"><i class="fab fa-instagram"></i></li> </i></a></li>
<li class="active"><i class="fab fa-google-plus-g"></i></li>
<li class="active"> <i class="fab fa-linkedin-in"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
CSS:
`<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'`>
JS
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
Everything works fine but in mobile view navbar does not open , Can someone help me whats wrong here, i don't find any issues in console for other js files as well.
Try Putting the button outside the navbar itself. Moreover, make sure that there's no mismatch between the data-target of the button and the id of the tag, as the collapsing only works with IDs, not classes.
As someone probably know - eBay doesn't respect eg. jQuery. I want make responsive template with responsive menu, but I don't known what should I do with menu. I must delete all jQuery from bootstrap and now menu toggle doesn't work on eg. smartphones. What should I do?
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-headerOne">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Store</li>
<li>Payments</li>
<li>Shipping</li>
<li>Returns</li>
<li>Terms</li>
<li>Gurantee</li>
<li>Abous us</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav>
To create these menus without javascript you have to use some CSS. Maybe this link will help you for similar problems: bootstrap-without-jquery
Here is a solution for your particular problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/* Dropdown without JS */
.dropdown-toggle:focus {
pointer-events: none;
}
.dropdown-toggle:focus + .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.dropdown-menu {
opacity: 0;
display: block;
visibility: hidden;
transition: visibility 0.5s;
}
</style>
<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="dropdown-toggle navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="dropdown-menu" style="position:absolute;right:0;">
<li class="">
menu1 <span class="sr-only">(current)</span>
</li>
<li class="">
menu2 <span class="sr-only">(current)</span>
</li>
<li class="dropdown active">
menu3 <span class="sr-only">(current)</span>
</li>
<li class=""><a href="/menu3/submenu1/">submenu1
<span class="sr-only">(current)</span></a>
</li>
<li class=""><a href="/menu3/submenu2/">submenu2
<span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="navbar-brand" href="/"
style="background: white; padding-left: 50px;">App</a>
</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">
<li class=""><a href="/menu1/">menu1
<span class="sr-only">(current)</span></a>
</li>
<li class=""><a href="/menu2/">menu2
<span class="sr-only">(current)</span></a>
</li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu3
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="">A</li>
<li class="">B</li>
<li class="">C</li>
<li class="">D</li>
</ul>
</li>
<li class=""><a href="/menu3/submenu1/">menu3
<span class="sr-only">(current)</span></a>
</li>
</ul>
<i class="navbar-text navbar-right">
Logout
</i>
</div>
</div>
<!-- /.container-fluid -->
</nav>
I have problem, with navbar toggle in twitter bootstrap 3 on small screens (when collapse button appears),
everything looks fine i think, when i execute my code on jsfiddle collapse button works, but in my asp net mvc project menu dropdown doesnt appear when i click on button,
heres code:
<nav class="navbar navbar-default scrollMenu" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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" href=""></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" id="scrollTarget">
<ul class="nav navbar-nav pull-right">
<li class="active"><i class="fa fa-home"></i>1</li>
<li class=""><i class="glyphicon glyphicon-star">2</i> </li>
<li class=""><i class="glyphicon glyphicon-stats">3</i> </li>
<li class=""><i class="glyphicon glyphicon-ok"></i>4 </li>
<li class=""><i class="fa fa-bullhorn fa-1"></i>5</li>
<li class=""><i class="glyphicon glyphicon-globe"></i>6 </li>
</ul>
</div>
</nav>