I'm having an issue where a dropdown menu in my navbar works on a desktop, but doesn't expand in mobile.
Here is the live site: http://launchsummer.org/
If you shrink the page to mobile-sized, you'll see that the "launch summer" dropdown does not expand.
Here is the code for the navbar:
<!-- Navigation -->
<!-- Note: navbar-default and navbar-inverse are both supported with this theme. -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="[[~1]]">
<img src="assets/logo-nav#2x.png" class="img-responsive" alt="">
</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 navbar-right">
<li class="hidden">
</li>
<li>
Home
</li>
<li>
About Us
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Launch Summer <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><font color="#080A21">Program Details</font></li>
<li><font color="#080A21">FAQ</font></li>
<li><font color="#080A21">Launch Alumni</font></li>
<li><font color="#080A21">Past Companies</font></li>
<li role="separator" class="divider"></li>
<li><font color="#080A21">Apply!</font></li>
</ul>
</li>
<li>
LaunchX
</li>
<li>
Launch Clubs
</li>
<li>
Blog
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
In your vitality.js, at line 23 to 26, you have this function :
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
So when we click on any item, the menu is closed. You can do this to prevent the menu from closing when you click on a dropdown menu.
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li:not(.dropdown) a').click(function() {
$('.navbar-toggle:visible').click();
});
so dropdown Opened but Same time Closing beCaUse inside Link have href="#" delete dropdown Child a elements href attribute
Related
I am using bootstrap 3.3.7 and using nav bar of bootstrap. I want menu should toggle when using tab key. Below code is workign fine but due to this after opening the menu links define inside it not working.
Note:- Using tab and then click on link not working. Using mouse and click on link working.
$(".main-nav a").on("keydown", function () {
$(this).next().dropdown("toggle");
});
Code below
<body>
<nav class="navbar navbar-default main-nav">
<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>
</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="dropdown">
Dropdown1 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown">
Dropdown2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown">
Dropdown3 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".main-nav a").on("keydown", function() {
$(this).next().dropdown("toggle");
});
</script>
</body>
Above is the complete code, using tab the nav opens on keydown that is my requirement. But due to this links are not working.
Try this
<style>
.marginBottom-0 {margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.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:hover>a:after{border-left-color:#555;}
.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;}
</style>
<nav class="navbar navbar-default navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
Is there a way to find out, with JS, if the toggle button menu is collapsed or hidden.
Does class="navbar-toggle" or data-toggle="collapse" have a parameter which indicates this state?
I know the events that are called when the ".collape" is shown or hidden:
$('.navbar-collapse').on('shown.bs.collapse', function () {
//called when dropdown menu is shown
});
Furthermore, I know the methods that shows or hides the collapse like this:
$('.navbar-collapse').collapse('hide');
But I can´t find any information on how to get the current status of .collapse, telling me if it´s hidden or shown.
(I am editing this answer with a better way.)
Yes, you can check if the element is visible, using jquery $(element).is(":visible")
Here is a live demo on jsFiddle
Here is some html
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
<input type="button" value="click me" onclick="clickedIt()" />
Here is some javascript
function clickedIt() {
var canSee = $("#myNavbar").is(":visible");
alert(canSee);
}
I'm using bootstrap, and it is a one page site. And when I need to use the toggle for mobile devices. The collapse works, but I need to uncollapse when I click on one of the menu liks.
Just need that to deliver the project.
Any thoughts?
http://www.neevasoft.com/docasnovo
html
<header id="header" class="navbar-fixed-top main-nav" role="banner">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Logo start -->
<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" href="#home">
<img class="img-responsive" src="images\logo.png" alt="logo">
</a>
</div><!--/ Logo end -->
<nav class="collapse navbar-collapse clearfix" >
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#home">Home</a></li>
<li><a class="page-scroll" href="#services">A Empresa</a></li>
<li><a class="page-scroll" href="#historia">História</a></li>
<li><a class="page-scroll" href="#about">Participações</a></li>
<li><a class="page-scroll" href="#team">Renovada</a></li>
<li><a class="page-scroll" href="#contact">Contato</a></li>
<li><a class="page-scroll" href="acervo.html" onClick="window.location='acervo.html'">Acervo</a></li>
<!--li><a class="page-scroll" href="#contact">Contact</a></li-->
</ul>
</nav><!--/ Navigation end -->
</div><!--/ Col end -->
</div><!--/ Row end -->
</div><!--/ Container end -->
</header><!--/ Header end -->
You can simply add to each li the following attributes:
<li data-toggle="collapse" data-target=".navbar-collapse">
<a class="page-scroll" href="#home">Home</a>
</li>
....
....
no need for JavaScript code here. because bootstrap will take care of it.
You can use .collapse('hide') from collapse.js. Docs
jQuery(document).ready(function($) {
$("li a.page-scroll").click(function() {
$(this).closest(".navbar-collapse.in").collapse('hide');
});
});
My navbar has a dropdown menu in it that will not toggle when a user navigates to a page with the affix.js functionality on it. I'm building this in Visual Studio 2012, so its a master/content page setup. On any other page, the navbar works fine, so I assume it has to do with affix.js because it is the only differing element.
Master navbar:
<nav class="navbar navbar-default" id="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="Home.aspx">
<img src="../Images/#######.png" class="img-responsive" alt="Bauen Group logo"/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Products & Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Consulting</li>
<li>Filler</li>
<li>Product Documentation</li>
</ul>
</li>
<li class="dropdown">
Company <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</li>
<li>Customer Portal</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On the content page, I added an extra reference to my jquery and bootstrap .js files in the header because I was getting an exception that jquery was not defined. The .js files are also referenced at the bottom of the master page.
Content page:
<script type="text/javascript">
$(document).ready(function () {
$('#sidebar').affix({
offset: {
top: 245
}
});
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
});
</script>
<div class="container" id="top">
<div class="row">
<div class="col-lg-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
//<li><a>side bar content</a></li>
</ul>
</div>
<div class="col-lg-9">
//content
</div>
</div>
Not too sure whats going on. I wonder if anyone else has had this problem. Any help would be appreciated.
I took the javascript references out on the content page. I solved my issue with the dropdown list by taking the jquery script in the content page header and inserting it into the code of the master page below the javascript references.
I don't know what I'm doing wrong here but I expect it's something woefully stupid.
I'm using Bootstrap 3 in Umbraco 6.0.5 and I cannot get the toggle to work on resize down - below 770px width the nav collapses but there's no button to toggle it with, or rather something is there, as seen in code and Firebug, but not visible, in Chrome and Firefox (haven't tried IE).
There's a fiddle and the code below. I'm using http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js and http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css in the fiddle.
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-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"#">reech</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class=" dropdown">
What is reech? <b class="caret"></b>
<ul class="dropdown-menu">
<li>About this site</li>
</ul>
</li>
<li class=" dropdown">
</li>
<li>Key reech projects</li>
<li class=" dropdown">
</li>
<li>Technologies</li>
<li class=" dropdown">
</li>
<li>Complementary Activities</li>
<li class=" dropdown">
News <b class="caret"></b>
<ul class="dropdown-menu">
<li>Merseyside collective switching scheme launched</li>
<li>reech scoops top award</li>
<li>reech award nomination</li>
<li>Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</li>
<li>Energy Switching Scheme</li>
<li>Project 'reeches' new milestone</li>
<li>Firms sign up for new opportunities</li>
<li>14 new jobs created for Merseyside residents</li>
<li>'reeching' out to Low Carbon and Green Energy Sector</li>
</ul>
</li>
<li class=" dropdown">
</li>
<li>reech into business</li>
<li class=" dropdown">
reech partners <b class="caret"></b>
<ul class="dropdown-menu">
<li>reech Steering Group</li>
</ul>
</li>
</ul>
</div><!--close navbar-collapse-->
</div><!--close container-->
</nav><!--Close nav-->
Update - so, I tried altering the data-target (and have altered the fiddle) to #main-nav and the id to main-nav, no joy.
The I tried putting a dash character in the button > span element, and it works. That is, the dashes display, and I can toggle the menu. But where are the icon bars?
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
And change <nav class="navbar"> to <nav class="navbar navbar-default">
Bootstrap - the toggle button will not show in mobile view
FIX:
Make these changes at: bootstrap.min.css
This fixes the outer border of the Toggle Button
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border-radius:4px
}
Add
border:1px solid #444;
(change color code to match your design)
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border:1px solid #444; /* added line */
border-radius:4px
}
This fixes the horizontal lines of the Toggle Button
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
}
Add
border:1px solid #444;
(change color code to match your design)
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
border:1px solid #444;
}
In your 1st line
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
it should be data-target="#nav-collapse" because you have <div class="collapse navbar-collapse" id="nav-collapse"> where id is nav-collapse
This should get you pointed in the correct direction. It looks like your main hiccup is your button data-target attribute is referencing a class rather than an ID. It's best to use an ID in this situation so if you call that class elsewhere in the code your not throwing curve balls at the javascript.
I also see you have several <li class="dropdown"></li> that are blank. I'm not sure if this is intentional or not, but I would refer to the structure that I've enclosed.
Hope this works for you, and best of luck!
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <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="#">Reech</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"> What is reech? <b class="caret"></b>
<ul class="dropdown-menu">
<li>About this site</li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> Key reech projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Technologies</li>
<li>Complementary Activities</li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> Key reech projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Technologies</li>
</ul>
</li><!-- dropdown -->
</ul><!-- nav navbar-nav -->
</div><!-- collapse navbar-collapse -->
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>