Bootstrap 3 - How to get tab bar in navigation - html

How can I get a Bootstrap tabbar into the header top bar? (see screenshot)
This is my code at this moment:
<div class="navbar navbar-inverse navbar-fixed-top">
<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="/">AppName</a>
</div>
<div class="navbar-collapse collapse">
<form method="post" id="logoutForm" class="navbar-right" action="/Account/LogOff">
<ul class="nav navbar-nav navbar-right" style="margin-right: 20px">
<li>
<a title="Manage" href="/Account/Claims">User</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
</li>
</ul>
</form>
</div>
</div>
</div>
<ul class="nav nav-tabs">
<li>Home</li>
<li class="active">Link A</li>
<li class="">Link B</li>
<li class="">Link C</li>
<li class="">Link D</li>
<li class="">Admin</li>
</ul>
Thanks!


You have to move this code below inside of the navbar-header div after the navbar-brand tag.
<ul class="nav nav-tabs">
<li>Home</li>
<li class="active">Link A</li>
<li class="">Link B</li>
<li class="">Link C</li>
<li class="">Link D</li>
<li class="">Admin</li>
</ul>
Your code should look like this
<div class="navbar navbar-inverse navbar-fixed-top">
<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="/">AppName</a>
<ul class="nav nav-tabs">
<li>Home</li>
<li class="active">Link A</li>
<li class="">Link B</li>
<li class="">Link C</li>
<li class="">Link D</li>
<li class="">Admin</li>
</ul>
</div>
<div class="navbar-collapse collapse">
<form method="post" id="logoutForm" class="navbar-right" action="/Account/LogOff">
<ul class="nav navbar-nav navbar-right" style="margin-right: 20px">
<li>
<a title="Manage" href="/Account/Claims">User</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
</li>
</ul>
</form>
</div>
</div>
</div>

Related

Bootstrap navbar search bar to the right

I have created a navbar but when I try to resize the screen, at one point search bars comes below rather than collapsing. MY code is :
//row start
<div class="row">
//navbar class with affix used in css
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="150">
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Technology</li>
<li>Sports</li>
<li>Science</li>
<li>Entertainment</li>
<li>Science</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Life</li>
<li>Tours and Travels</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form style="float:right" class="navbar-form" role="search" aria-expanded="false">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>

I see the 'More' dropdown you have there as a layout compromise and I just feel that more compromise is needed. I've condensed all menu links in a dropdown, on small screens.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav visible-sm">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Technology</li>
<li>Sports</li>
<li>Science</li>
<li>Entertainment</li>
<li>Science</li>
<li>Life</li>
<li>Tours and Travels</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav visible-md visible-lg">
<li>Technology</li>
<li>Sports</li>
<li>Science</li>
<li>Entertainment</li>
<li>Science</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Life</li>
<li>Tours and Travels</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><form style="float:right" class="navbar-form" role="search" aria-expanded="false">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form></li>
</ul>
</div>
</div>
</div>
</div>
</nav>

How to adjust nav bar in small screen?

I am making a navbar in my page using bootstrap 3,it isn't working well with small screen,the nav bar didn't collapse well when i try to minimize the screen,what is the problem?Here is a jsFiddle
<div class="container">
<div class="row">
<img id="logo" src="../lib/css/images/Logo.jpg" class="pull-left" width="100px" height="100px">
<nav class="navbar navbar-inverse" style="height: 40px;margin-left: 105px;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" 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" style="height: 30px;margin-top:-12px;">Welcome</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">Add New Category</li>
<li class="dropdown">Search Orders</li>
<li class="dropdown">Calendar</li>
<li class="dropdown">Order status</li>
</ul>
<ul>
<li class="nav navbar-nav navbar-right">
<?php
if(isset($_SESSION["username"]))
{
echo 'Log out';
echo '<h5>Welcome- '.$_SESSION["username"].'</h5>';
}
else
{
header("location:../login.php");
}
include_once "connect.php";
?>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>

The fiddle doesn't include bootstrap.js so the collapse component isn't working. It works fine when both the css and js are included.
http://www.codeply.com/go/VKrQTeUB4v

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>

Bootstrap 3 navbar separated collapsed menu items and non-collapsed

I'm trying to have "separated" menu items when the navbar is collapsed...
Here's what I tried so far but it doesn't look right when the navbar is not collapsed because the navbar will overflow to two rows:
<nav class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed" data-toggle="collapse"
data-target="#navbar-main">
<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="favicon-32.png">
</div>
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav hidden-xs">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
</ul>
<!-- Navbar items visible when collapsed -->
<ul class="nav navbar-nav navbar-right visible-xs">
<li ng-hide="isLoggedIn()" ng-class="{active: isActive('/login')}">Login</li>
<li ng-show="isLoggedIn()"><p class="navbar-text">Hello {{ getCurrentUser().name }}</p></li>
<li ng-show="isLoggedIn()" ng-class="{active: isActive('/logout')}">Logout
</li>
</ul>
</div>
<!-- Navbar items visible when not collapsed -->
<ul class="nav navbar-nav navbar-right hidden-xs">
<li ng-hide="isLoggedIn()" ng-class="{active: isActive('/login')}">Login</li>
<li ng-show="isLoggedIn()"><p class="navbar-text">Hello {{ getCurrentUser().name }}</p></li>
<li ng-show="isLoggedIn()" ng-class="{active: isActive('/logout')}">Logout</li>
</ul>
</div>
</nav>

Let's simplifying an example that describes what you need to do
<div class="navbar">
<div class="navbar-inner">
<div class="ps-content">
<button type="button" class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">Navigation</div>
<ul class="nav hidden-desktop hidden-tablet">
<li>Separated link</li>
</ul>
<!-- PS RHS menu items -->
<div class="visible-tablet pull-right">
<ul class="nav">
<li class="active">Active link</li><li class="divider-vertical"></li>
<li>Second link</li><li class="divider-vertical"></li>
<li>Third link</li>
</ul>
</div>
<div class="nav-collapse pull-right">
<ul class="nav pull-right ">
<li class="active text-right">Actives link</li><li class="divider-vertical"></li>
<li class="text-right">Second link</li><li class="divider-vertical"></li>
<li class="text-right">Third link</li>
</ul>
</div>
</div>
</div>
</div>
Check this bootply

How to put align a link right side in navigation bar

I have the following code, what I want is to align the logout button right hand side and three modules (contact us, about epm and modules) at center, so how can I do this with the help of bootstrap.Thanks in advance.
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">About EPM</li>
<li>Contact Us</li>
<li class="dropdown">
Modules <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Employer Section</li>
<li class="divider"></li>
<li>Employee Section</li>
<li class="divider"></li>
<li>Client Section</li>
<li class="divider"></li>
<li>Project Details</li>
</ul>
</li>
<li>
<a onClick="logout();" class="navbar-brand pull-right">
<span class="glyphicon glyphicon-off" id="icon"> Logout</span>
</a>
</li>
</ul>
</div>
</div>

To right align the logout object, you can use bootstrap's navbar-right class.
To center align the other links you can use the following CSS:
#bs-example-navbar-collapse-1 { text-align:center; }
.centered-navbar { display:inline-block; float:none; vertical-align:top; }
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<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="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</a>
</div>
<ul class="nav navbar-nav centered-navbar">
<li class="active">About EPM</li>
<li>Contact Us</li>
<li class="dropdown">
Modules <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Employer Section</li>
<li class="divider"></li>
<li>Employee Section</li>
<li class="divider"></li>
<li>Client Section</li>
<li class="divider"></li>
<li>Project Details</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a onclick="logout();">
<span class="glyphicon glyphicon-off" id="icon"> Logout</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Bootply here: http://www.bootply.com/ddmUGfX0PI

How to display navbar in mobile like sidebar

I have a navbar in a desktop site, but I want it in mobilesite like a sidebar.
How to convert the navbar to sidebar in the mobile site?
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Site name
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home">Home <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>page 1</li>
<li>page 2</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>username</li>
</ul>
</div>
</div>
</div>