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.
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 banging my head against this for a while, and for some reason I'm unable to get a simple bootstrap navbar dropdown to work with angular ui-router and ui-bootstrap (1.3.3, the latest). Here's my current code:
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse 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="#">Your <img class="logo-img" src="assets/images/formio-logo-lg.png"> application.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ng-class="{active:isActive('calendar')}" ui-sref="calendar" ng-show="authenticated">Duty Shifts</a></li>
<li><a ng-class="{active:isActive('eventIndex')}" ui-sref="eventIndex" ng-show="authenticated">Events</a></li>
<li><a ng-class="{active:isActive('trainingIndex')}" ui-sref="trainingIndex" ng-show="authenticated">Training</a></li>
<li><a ng-class="{active:isActive('shiftIndex')}" ui-sref="shiftIndex" ng-show="authenticated">Shifts List</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="trainingCreate">Add Training</a></li>
<li><a ui-sref="eventCreate">Add Event</a></li>
<li><a ui-sref="shiftCreate">Add Shift</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="authenticated"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="content">
<div class="row" ng-cloak>
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.message}}</uib-alert>
</div>
<div ui-view></div>
</div>
</div>
With this setup, I see the Admin dropdown menu, but clicking does nothing, whether or not I have a ui-sref attribute.
If I do everything suggested in the migration guide for dropdowns, like so:
<li uib-dropdown>
<a ui-sref="home" uib-dropdown-toggle uib-dropdown role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul uib-dropdown-menu>
<li><a ui-sref="trainingCreate">Add Training</a></li>
<li><a ui-sref="eventCreate">Add Event</a></li>
<li><a ui-sref="shiftCreate">Add Shift</a></li>
</ul>
</li>
it still doesn't work. I'm sure I'm missing something obvious, but I'm not sure what. I've looked at the ui-navbar package, but I don't want to have to re-tool everything just for a dropdown if I don't have to.
What am I doing wrong? And yes, I do have ui.bootstrap and ui.router injected in my app definition.
Thanks.
Here is working plunker based on your code.
The admin dropdown inside the navbar looks like:
<li class="dropdown" uib-dropdown>
<a class="dropdown-toggle" uib-dropdown-toggle>
<i class="fa fa-cogs"></i> Admin <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="training" ng-click='navCollapsed = true'>Add Training</a></li>
</ul>
</li>
When you click on training, it loads training.html in the div ui-view as a single page application. Note that in the ui-sref I added a ng-click to collapsed the main navigation.
The full navbar looks like:
<nav class="navbar navbar-inverse " role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
<ul class="nav navbar-nav">
<li><a ui-sref="home" ng-click='navCollapsed = true'>Home</a></li>
<li><a ui-sref="home" ng-click='navCollapsed = true'>Link</a></li>
<li class="dropdown" uib-dropdown>
<a class="dropdown-toggle" uib-dropdown-toggle>
<i class="fa fa-cogs"></i> Admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref="training" ng-click='navCollapsed = true'>Add Training</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
I configure the routing like this:
angular.module('plunker', ['ui.router', 'ui.bootstrap'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home'
})
.state('training', {
url: '/training',
templateUrl: 'training.html',
});
})
Let us know if that helps. Best.
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 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>