I have a navbar dropdown that when highlighted, shows an extra caret. It occurs on each highlighted option in the navbar.
Here is my code:
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Username
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><i class="icon-home"></i> Dashboard</li>
<li><i class="icon-user"></i> Profile</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
Try this HTML, works fine for me (Google Chrome):
http://jsfiddle.net/CpQVb/
Related
I'm trying to populate a drop down menu using UI Bootstrap's uib-dropdown and ng-repeat but only the last record in the array is being populated.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
<li>{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
I've confirmed that TN.resourceList has 3 records.
If I remove: class="dropdown-menu"
from: <ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
then all the records display but it no longer renders as a drop down menu.
I also tried adding the uib-dropdown-menu directive to the <ul> with the ng-repeat on it as well as the role attributes as suggested in this answer: Bootstrap Dropdownlist Issue in angular JS
But it had no effect.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="resource in TN.resourceList">{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
Notice the ng-repeat on the li instead of the ul dom element (ng-repeat repeats elements where it added to and it's childeren).
You're repeating the dropdown-menu itself. You should have one dropdown-menu and repeat the li instead:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="resource in TN.resourceList">{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
Easiest answer is to consider looking at the ng-repeat itself as a loop. Within normal html, you wouldn't want to have multiple lists or 'ul' tags would you? You would want one list with multiple entries or 'li' tags.
Consider the answers above as direct answers, but realistically, you should be able to look at your code and figure out that you want to repeat the list entries and not the list itself.
Would it be possible using css bootstrap to recreate this style of menu I am using bootstrap and so far I have the top bar just with the two tabs and drop downs. I also see to show a drop down as in the administrator link you see and also a settings cog.
The blue icons buttons shoud be drop downs till the last item. I have posted my initial code on pastbin as the editor here was turning them into elements. Can someone advise me on how to stop that from hapening.
Code
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Cassed Dimensions Portal</li>
<li>Configruation Items</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
Using Twitter Bootstrap, is it possible to show menu item icons when the viewport shrinks rather than collapsing the menu altogether and just showing the three-bar button?
I have not changed the default css (other than applied the Flatly theme).
<nav id="navigation_bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- <div class="col-xs-10 col-xs-offset-1">-->
<!-- 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="/">Hawksmoor</a>
</div>
#if(Auth::check())
<!-- 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><i class="fa fa-home"></i> Home</li>
<li class="dropdown">
<i class="fa fa-clock-o"></i> Timecard <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Timecard</li>
<li>CICO</li>
<!-- <li class="divider"></li>-->
<!-- <li>Separated link</li>-->
</ul>
</li>
<li class="dropdown">
<i class="fa fa-tasks"></i> Tasks <span class="badge alert-danger">2</span><b class="caret"></b>
<ul class="dropdown-menu">
<li>View Tasks</li>
<li>Add a Task</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li><i class="fa fa-users"></i> People</li>
<li class="dropdown">
<i class="fa fa-file-text-o"></i> Policies <b class="caret"></b>
<ul class="dropdown-menu">
<li role="presentation" class="dropdown-header">Work</li>
<li><i class="fa fa-suitcase"></i> Business Conduct</li>
<li><i class="fa fa-recycle"></i> Environment</li>
<li><i class="fa fa-fire-extinguisher"></i> Health & Safety</li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Home</li>
<li><i class="fa fa-plane"></i> Holiday</li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Other</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if (Auth::guest())
<!-- Not needed as employees will already be registered -->
<!-- <li>Sign up</li> -->
<!-- <li>Sign in</li> -->
#else
<li class="dropdown">
<i class="fa fa-user"></i> {{ Auth::user()->profile->nickname }} <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> View Profile</li>
<li><i class="fa fa-pencil"></i> Edit Profile</li>
<li><i class="fa fa-envelope"></i> Webmail</li>
<li class="divider"></li>
<li><i class="fa fa-cog"></i> Preferences</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Sign out</li>
</ul>
</li>
#endif
</ul>
</div><!-- /.navbar-collapse -->
#endif
<!-- </div>-->
</div><!-- /.container-fluid -->
</nav>
If someone could point me in the right direction it would be much appreciated.
There are two basic tasks you need to do here: 1) disable collapse 2) hide menu text
Demo: http://www.bootply.com/MWsmEO9bb4#
1) Disable the collapsing menu and hamburger icon. You'll do this by overriding bootstrap CSS like so:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
NOTE: using !important is the simplest way to do this, but it's also a bit of nuclear option as it can make your menu hard to manipulate later on. Deeper digging into bootstrap css will likely reveal some media queries you can override with more granularity... but that's more digging than I have patience for right now:)
EDIT: It just occured to me, what I suggested below is unneecessary. No custom #media-query triggered class needed, just use Bootstrap's hidden-xs like so:
2) Hide menu text at a given breakpoint like so:
<i class="fa fa-home"></i><span class="hidden-xs"> Home</span>
That's it! EDIT OVER
2) Hide menu text at a certain breakpoint. You'll do this by wrapping the text in a span with custom media query Bootstrap's hidden-xs like so:
<i class="fa fa-home"></i><span class="hidemobile"> Home</span></a></li>
CSS
#media (max-width: 992px) { /* or whatever breakpoint you want */
.hidemobile {
display:none;
}
}
There is still some behaviour there that you may want to tweak (eg: how to handle your left/right split menu, when to bring the icons closer together to avoid second menu row, etc) but this should get you going in the right direction.
PS - I updated my bootply too...
Using the latest version Bootstrap, I am wanting to replace the branding area text with a logo. On my desktop, it looks perfect, on my iPhone, the logo appears under the small collapse menu, whereas it should be beside it (to the left of it). If I make the logo smaller, it works fine on the iPhone, but the small logo is too small for the desktop site. I thought by adding the img-responsive class to the logo, it would shrink accordingly, but that fails. If you want to replicate this, the logo is 276px wide 40px high.
Everything appears fine on the iPhone in horizontal orientation (it is strictly a problem when viewing in vertical, which is naturally the way most people hold their phone).
Here is the related code (you will notice near the bottom, there is a purchase button, this automatically gets hidden on the iPhone, which would suffice for the logo if there is no other option). Mind, the ultimate solution would be to have the logo shrink based on screen size.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Application <b class="caret"></b>
<ul class="dropdown-menu">
<li>Features</li>
<li>Screenshots</li>
<li>Demos</li>
<li class="divider"></li>
<li>Purchase</li>
<li>Licensing Model</li>
</ul>
</li>
<li class="dropdown">
Documentation <b class="caret"></b>
<ul class="dropdown-menu">
<li>Version Info</li>
<li>System Requirements</li>
<li class="divider"></li>
<li>Installation Guide</li>
<li>Integration Guide</li>
<li>Frontdesk Manual</li>
</ul>
</li>
<li class="dropdown">
Support <b class="caret"></b>
<ul class="dropdown-menu">
<li>Knowledgebase</li>
<li>Submit Ticket</li>
<li>View Ticket Status</li>
<li class="divider"></li>
<li>Installation Service</li>
<li>Development Services</li>
</ul>
</li>
<li class="dropdown">
Contact <b class="caret"></b>
<ul class="dropdown-menu">
<li>Presales Questions</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">
Legal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Privacy Policy</li>
<li>Terms of Use</li>
<li>Site Security</li>
<li class="divider"></li>
<li>Money Back Guarantee</li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button>
</div>
<!--/.nav-collapse -->
This fixes the I-phone issue with the brand logo appearing under the collapsed menu icon. you might have to play with the width a bit depending on your setup:
#media (max-width: 500px) {
.navbar-brand{
width:60%;
}
}
Put your image as a background in css with background-size:cover.
I am trying to include an icon in a drop down menu. The icon is causing the menu to be rendered incorrectly (it appears the icon is being repeated on the menu bar and the menu).
snippet:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project X</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-off">Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Any idea what is causing this?
You need to close your tag.
<i class="icon-off"></i>
This worked for me
<li> <i class="icon-off"> </i> Sign Out </li>