i am trying to create a responsive navbar with icon on both left and right side and name aligned in the center.
trying to achieve - http://i40.tinypic.com/2j3o9rb.jpg
present output - http://i42.tinypic.com/1z3pbuh.jpg
please help me solve this
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-brand" style="display: inline-block">
<img class="logo" src="img/qc-icon.png" />
</div>
<div class="container">
<div style="text-align:center">
<span>Name</span>
<span class="pull-right"><img src="img/qc-icon.png" /></span>
</div>
</div>
</div>
thanks
jetin
http://www.bootply.com/117643
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="collapse navbar-collapse pull-left">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="col-md-4">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="#">Project name</a>
</div>
</div>
<div class="col-md-4">
<ul class="nav navbar-nav pull-right">
<li class="">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
Related
I am using AngularJs and Bootstrap. While I am using $RouteProvider for SPA, I am using bootstrap for the layout. This is working fine.
However, I am now trying to use Bootstrap nav-tabs to have tab based navigations.
My HTML is like this:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- 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">
<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="#/mis"><i class="fa fa-tachometer"></i> TrigonMeter</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul id="tabs" class="nav navbar-nav nav-tabs container-fluid" data-tabs="tabs">
<li class="active"><a data-target="#db" href="#db" data-toggle="tab">Dashboard</a></li>
<li><a data-target="#admin" href="#admin" data-toggle="tab">Admin</a></li>
<li><a data-target="#mis" href="#mis" data-toggle="tab">MIS</a></li>
<li><a data-target="#fin" href="#fin" data-toggle="tab">Finance</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-link">Hi {{globals.currentUser.username}}</li>
<li><span class="glyphicon glyphicon-log-out"></span>Logout</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
For the tabs. This works fine. And the following is the tab-content section:
<div class="container-fluid">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="row">
<div id="my-tab-content" class="tab-content col-sm-2 col-md-2 sidebar">
<div class="tab-pane active" id="db">
<h1>Dashboard</h1>
<ul>
<li>Organisation Details</li>
<li>Job Numbers</li>
<li>Job Expenses</li>
<li>Job Financial Details</li>
<li>Contracts</li>
</ul>
</div>
<div class="tab-pane" id="admin">
<h1>Admin</h1>
<p>Organisation Details</p>
</div>
<div class="tab-pane" id="mis">
<h1>MIS</h1>
<ul>
<li>Job Numbers</li>
<li>Job Expenses</li>
<li>Job Financial Details</li>
<li>Contracts</li>
</ul>
</div>
<div class="tab-pane" id="fin">
<h1>Finance</h1>
<p>orange orange orange orange orange</p>
</div>
</div>
<div class="col-sm-10 col-md-10">
<div ng-view></div>
</div>
</div>
</div>
But The tab-content section is not working.
Please do let me know if I could explain the problem.
Is there a way to do this?
I want to use Bootstrap to create a hybrid single page application (for example like Ionic Tabs) that has fixed tabs at the bottom, a dynamic header at the top and a scalable content. Which attributes of the bootstrap framework can I use to achieve this?
Try this template
http://getbootstrap.com/examples/sticky-footer-navbar/
<nav class="navbar navbar-default 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" 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="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
I believe it is not responsive because I added navbar-fixed-top instead of what bootstrap uses, which is navbar navbar-default. Would you know how to make it responsive while the navbar is fixed?
<nav class="navbar navbar-fixed-top" role="navigation">
This is working for me
Here is an example of what it should look like.
<head>
<link href="styles/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>
</head>
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="#"><img src="assets/images/logo.png" alt=""> </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Book</li>
<li class="dropdown">
<span class="glyphicon glyphicon-align-justify"></span> Table of Contents
<ul class="dropdown-menu">
<li>content 1</li>
<li>content 2</li>
<li>content 3</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
you can also see many examples of working navbars on the bootstrap site
Bootstrap examples
The toggle button appears but it is not working. I've got a same code now in online as well and it is not working but in Plunker it is working.
Plunker - toggle button is working
Same code online - button is not working
And the code is:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="nalogo-wrapper">
<img class="img-responsive" src="http://placehold.it/50x50&text=Logo" />
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span> Etusivu</li>
<li>Palvelut</li>
<li>Yhteistiedot</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="main">
<div ng-view>
</div>
</div>
Thanks for help!
Sami
I just copied this out of a working project where I used angular-ui bootstrap:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" 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="/#">Bake-Off</a>
</div>
<div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>
You must make some changes to your navbar to accomodate the collapse directive of Angular UI-Bootstrap. I wondered about this myself not so long ago, the question was already asked and answered over here:
Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)
Adding an alternative solution to the answer of Josh C, just changing the collapse to uib-collapse, based on the latest documentation
https://angular-ui.github.io/bootstrap/#!#collapse
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" 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="/#">Bake-Off</a>
</div>
<div uib-collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>
I'm trying to get my navbar to collapse correctly. I have three links on the right that should disappear when my navbar collapses. Instead, they overlay the links I want to appear upon collapse. Any suggestions?
Here is my code:
<div class="navbar navbar-default navbar-fixed-top" 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>
XYZ
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav pull-left">
<li>Home</li>
<li>Projects</li>
<li>Finance</li>
<li>Resume</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li></li>
<li></li>
</ul>
</div>
</div>
####UPDATED CODE, but icons collapse on new row overlaying content #######
<div class="navbar navbar-default navbar-fixed-top" 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><img src="img/lior.jpeg">
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>Finance</li>
<li>Resume</li>
</ul>
<div style="float:right">
<ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The easiest way seem to use the http://getbootstrap.com/css/#responsive-utilities.
For your right navigation (icons) use:
<ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
This will hide the icons when the navbar has been collapsed.
Also read: Bootstrap 3 Multiple Nav bar Menus