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>
Related
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.
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>
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>
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>
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