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>
Related
I want two icons next to each other (nearly no space between them), I put them in same li and same div but they are now blue and not well positionned vertically, what bootstrap class or custom style or anything else should I use (just putting in 2 li doesn't make it, the icons have too much space between them) ? :
https://www.w3schools.com/code/tryit.asp?filename=FD6NR1HEOO3W
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<div class="btn-group">
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-log-in"></span>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
You should not use <div> inside <li>
I have used two different li for both icons and added two classes, check below snippet:
Note: You can adjust space between icons using by increasing padding
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-right li{
display:inline-block
}
.navbar-right li .left_padd {
padding-left:0;
}
.navbar-right li .right_padd {
padding-right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<a class="right_padd" href="#"><span class="glyphicon glyphicon-user"></span></a><li>
<li><a class="left_padd" href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
The problem is you have <div class="btn-group"> and you don't need it, also you have the two buttons inside only one <li>.
This is your code:
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-log-in"></span>
</div>
</li>
</ul>
and should be like this: only one <li> per button, without the btn-group div:
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-log-in"></span></li>
</ul>
Here is an example: https://www.w3schools.com/code/tryit.asp?filename=FD6OLHFYBBWZ
Apply color:white and padding-top to the spans that contain .glyphicon. This should help.
Change the markup for your nabvar containing the glyphicons from this:
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-log-in"></span>
</div>
</li>
</ul>
to:
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-user"></span>
</li>
<li>
<span class="glyphicon glyphicon-log-in"></span>
</li>
</ul>
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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></li>
<li><span class="glyphicon glyphicon-log-in"></span></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
Or, don't create a second navbar at all.
Change:
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-log-in"></span>
</div>
</li>
</ul>
to:
<p class="navbar-text navbar-right">
<a class="navbar-link" href="#"><span class="glyphicon glyphicon-user"></span></a>
<a class="navbar-link" href="#"><span class="glyphicon glyphicon-log-in"></span></a>
</p>
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<p class="navbar-text navbar-right">
<a class="navbar-link" href="#"><span class="glyphicon glyphicon-user"></span></a>
<a class="navbar-link" href="#"><span class="glyphicon glyphicon-log-in"></span></a>
</p>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
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>
I'm making an application with bootstrap and I have a nav bar, however for some reason when I resize the page the links disappear but the toggle button doesn't show.
Here is my nav bar:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">title</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
</nav>
Any help to fix this would be greatly appreciated.
You don't currently have the toggle button in your code. Try placing the following before your collapse, and after your 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>
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
you havent added a toggle button as i can see in your code
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">title</div>
</div>
For more details refer Navbar documentation (bootstrap)
in my case I am using bootstrap5 but class I was using old version, after changing code as below it worked for me by going though BS5 W2Schools:
<nav class="navbar navbar-expand-sm bg-dark">
<div class="container-fluid">
Recipe Book
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/recipes">Recipes</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/shopping-list">Shopping List</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown" appDropdown>
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Manage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Save Data</a></li>
<li><a class="dropdown-item" href="#">Fetch Data</a></li>
</ul>
</li>
</ul>
</div>
</nav>
referece:https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
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
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