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
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.
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 trying to stick notification submenu to toggle menu in small screens and stick to right on small screens like the following
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed pull-left">
<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">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
</div>
</div>
<ul class="nav">
<li class="dropdown dropdown-list">
<a href="javascript:;" data-toggle="dropdown" dropdown-animate="" aria-haspopup="true" class="dropdown-toggle">
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</li>
</ul>
</nav>
But unfortunately it does not work. Please help me how could I do it?
To keep the notification always visible, you could add them to the nav-header like this:
<div class="navbar-header">
<button class="navbar-toggle collapsed">...</button>
<div class="nav navbar-brand pull-right">
<a href="#" >
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</div>
</div>
.notifications.navbar-brand {
font-size: 14px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
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>
<div class="nav navbar-brand pull-right notifications">
<a href="#" >
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-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>
</div>
<div class="collapse navbar-collapse" id="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.