I added twbs:bootstrap to my packages file to download it. I went to the docs for that package and it led me straight to the Bootstrap web sight. Then tried inserting the following code from that web-sight for a header
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>...</li>
<li>...</li>
</ul>
But it just gives me an unordered list not in the form of a navbar. Any thoughts?
I had the same problem, and found the solution. Wherever you have "class=", use instead "className=".
See https://gist.github.com/zpao/6321691 and https://github.com/facebook/react/pull/328 for the decision to invalidate "class" in favor of "className". That was over two years ago -- you'd think they would have updated the documentation to match
This is the navbar of one of my apps. Use this as an example and change according to you preferences:
<div class="container-fluid navbar-inner">
<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>
<a class="navbar-brand" href="/">Some Brand</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="active"><a>{{>loginButtons}} <span class="sr-only">(current)</span></a></li>
<li>Somewhere</li>
<li>Somewhere</li>
<li>Somewhere</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- / container-fluid -->
</nav>
Related
I am trying hard to understand how the menu system works on airtasker.com website. I need a similar menu for a site. can we achieve it using boostrap. the links/icons are changed from web to mobile screen.
I have made the basic collapse menu, but struggling to make it work as on airtasker.com site.
help will be appreciated.
Regards
Paraminder
Check this may be this works for you..
<header class="navbar navbar-default" id="top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-expanded="false" type="button" 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="../">
<img alt="Brand" src="../Images/B.png" /> </a>
</div>
<nav class="collapse navbar-collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li>
CSS
</li>
<li>
Components
</li>
<li>
JavaScript
</li>
<li>
Customize
</li>
</ul>
</nav>
</div>
</header>
I have a webpage which has a standard bootstrap header (with a logo and dropdown section) and a sidebar for navigation.
I'm trying to make the sidebar collapse when the screen size is small. For this, I've made a toggle button which collapses the menu just fine. But the problem is that it seems that even when the collapse-able menu is closed, some contents still show up on top of everything.
Here's a screenshot to show you what I mean.
The purple box shows that even when the menu is closed, its contents somehow show up on top of the other elements.
Is there a fix for this?
Here's the code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<span class="caret"></span>
<a class="navbar-brand pull-right" href="#">Company Logo</a>
</div>
<ul id="side" class="nav navbar-nav collapse visible-xs">
<li>Home</li>
<li>Stuff</li>
<li>List Example</li>
<li>Contacts</li>
<li class="dropdown">User <span class="caret"> </span>
<ul class="dropdown-menu">
<li>Profile</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
Try adding this to the navbar-header
<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>
</div>
and remove the visible-xs too from there.
How can I use two navbar-toggle menus next to each other? If I click on the first icon it will open normally but if I click on the second icon, the first one doesn't close.
Here is what I am trying to do
<nav class="navbar-blue" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-default">
<button type="button" class="navbar-toggle navbar-user" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle navbar-menu" 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="#">
Logo goes here
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-default" id="navbar-collapse-1">
<ul class="nav navbar-nav client-nav navbar-right">
<li>
<a class="active" href="#">My Projects</a>
</li>
<li>
Search
</li>
<li>
Post Project
</li>
<li class="hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-user"></span><span class="fa fa-sort-desc"></span></a>
<ul class="dropdown-menu client-dropdown">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
<!-- User menu to show on screens < 768px -->
<div class="collapse navbar-collapse navbar-default" id="navbar-collapse-2">
<ul class="nav navbar-nav client-nav navbar-right">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I had to update bootstrap to the latest version. Your demo is using 3.0.0 whereas 3.3.5 is the latest. Regardless, according to the documentation from bootstrap's site, you can accomplish this by listening for the show.bs.collapse event and triggering .collapse('hide') for the other menus.
$(function(){
$('.navbar-blue .navbar-collapse').on('show.bs.collapse', function(e) {
$('.navbar-blue .navbar-collapse').not(this).collapse('hide');
});
});
Demo: Jsfiddle
I am trying to implement the responsive bootstrap navigation bar but having trouble handling the collapsed state.
Once I resize the window I get to the state where this button appears:
When I click this button nothing happens.
Below I attached my code for my current navigation bar. Could it be the naming of the divs that is wrong? When I read the documentation it says that the collapse plugin is required - shouldn't this plugin be included in the standard bootstrap for angular?
I also tried this solution: https://stackoverflow.com/a/17672546 - but it is as if when the state is changed in the collapse="isCollapsed" no effect is achieved.
<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="#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="#">My Application</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/logbook')}">Log Books</li>
<li ng-class="{ active: isActive('/logentry')}">Logs</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/logentry/create')}">Create Log</li>
<li ng-class="{ active: isActive('/status')}">Show Status</li>
<li ng-class="{ active: isActive('/statistics')}">Statistics</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
If you are not using twitter bootstrap's javascript then you can use angular-ui bootstrap's collapse directive to collapse your navbar. Just make sure to put an ng-click directive on the .navbar-toggle button to negate the current value of the collapse variable. Add another ng-click to the .navbar-collapse element to collapse the navbar when a link has been clicked.
Here's a DEMO
<body ng-click="collapse = false">
<div class="navbar navbar-default" ng-click="$event.stopPropagation()">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
ng-click="collapse = !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">
Title
</a>
</div>
<div class="collapse navbar-collapse"
ng-controller="HeaderController"
collapse="!$parent.collapse" ng-click="$parent.collapse = false">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
</ul>
</div>
</div>
</div>
</body>
UPDATE:
1 I noticed that you have an ng-controller within the .navbar-collapse item, since an ng-controller creates a child scope, you have to use collapse="!$parent.collapse" and ng-click="$parent.collapse = false" within that element itself. The plunker has been updated above, check it out.
2 As a side note, you can take it a step further and add an ng-click="collapse = false" within your html body to collapse the navbar when the user clicks outside of the navbar, just make sure to add ng-click="$event.stopPropagation()" to the .navbar element to avoid collapsing it while the user is clicking the .navbar-toggle.
Your code seems to be fine please see here http://jsbin.com/xinujuvi/1/edit
make sure that you've got reference to bootstrap.min.js script
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Make sure to referrence this :
ui-bootstrap-tpls-0.11.0.min.js
You can download it from their site
And this is the code :
<nav class="navbar navbar-default" role="navigation" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-danger" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar btn-info"></span>
<span class="icon-bar btn-info"></span>
<span class="icon-bar btn-info"></span>
</button>
<a class="navbar-brand">YouSite</a>
</div>
<div class="navbar-collapse collapse" collapse="!isCollapsed" id="navbar-collapse-1" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/logbook')}">Log Books</li>
<li ng-class="{ active: isActive('/logentry')}">Logs</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/logentry/create')}">Create Log</li>
<li ng-class="{ active: isActive('/status')}">Show Status</li>
<li ng-class="{ active: isActive('/statistics')}">Statistics</li>
</ul>
</div><!-- /.navbar-collapse -->
I'm trying to get an app to work nicely with a mobile browser, having got it working well on a normal desktop. I'm just starting out on the responsive layout stuff so am a bit of a newbie here.
I have the bootstrap nav-bar working down to 768px as shown here
but at 768px and below it does this
So, I'm obviously missing something in my css but have NO idea how to get the menu to stack as I thought it would automagically at the mobile browser sizes (isn't that what bootstrap is meant to do for me?).
The code being used to generate the menu is
<template name="header">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-home"></i></li>
</ul>
<ul class="nav navbar-nav">
<li>Make a request</li>
</ul>
<ul class="nav navbar-nav">
<li>Packing</li>
</ul>
<ul class="nav navbar-nav">
<li>Admin</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{{>loginButtons}}
</ul>
</div>
</div>
</template>
Thanks guys, my lack of understanding is glaring I assume.
Peter.
You need to include the following in your navbar markup;
<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="#">Brand</a>
</div>
See the documentation on the navbar here
Bootstrap will do what you are expecting it to, given you use the right tags and classes. For the navbar, you've missed <div class="navbar-header"> which holds the toggle-button to show/hide the menu on smaller viewports. The code looks like:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
The navbar1 is the id from your .navbar-collapse div.
<div class="navbar-collapse collapse" id="navbar1">
You can also add an anchor tag within the div for adding any logo or brand name:
<a class="navbar-brand" href="#">Logo/Company name here</a>
DEMO (Click on the mobile icon to see it in mobile view)