I wrote a custom bootstrap header as shown in the screen shot:
I want that navbar to be moved to right so that it can suit the requirements like this.
I used external CDNs for bootstrap and jquery.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="images/logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
.navbar-fixed-top {
min-height: 80px;
}
.navbar-fixed-top .navbar-collapse {
max-height: 136px;
}
.navbar-collapse {
margin-top: 1%;
}
.navbar{
background-image: none;
}
#media (min-width: 768px) {
.navbar-fixed-top .navbar-collapse {
max-height: 50px;
}
}
#myNavbar {
background-color:#0067ac;
color:#16ac07;
border-radius:0;
}
Fiddler:
https://jsfiddle.net/z4b2bwg6/9/
How can I do it?
Just add the class .navbar-right to make the menu items float to the right - http://getbootstrap.com/components/#navbar-component-alignment
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Related
I tried to make top navbar left side logo and center text and right text as size of logo. i able to make left left side logo on top navbar and text on right side of the top navbar but unable to make some text in the center other top navbar, even facing the problem to make right side text(i tried to add clearflex) size as logo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Theme CSS -->
<link
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<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="#"><img src="img/logo1.jpg"
height="48" width="202" class="pull-left"></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 href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
I tried to do like this image:
Add these styles
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<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="#"><img src="img/logo1.jpg"
height="48" width="202" class="pull-left"></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 href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
I'm trying to make the name/logo of my brand appear in the center of the Navbar only when the screen is narrow enough to replace the links with the hamburger menu. In other words, the same behaviour of Apple website's Navbar.
The behaviour I'm expected to deliver is that the navbar should show the brand on the left side on normal web browsers, and once used on a phone or a mobile device, the logo should be in the center and the hamburger button should show on the left side.
I'm using Bootstrap to implement that, so far I could bring the menu to the left, but I can't figure out how to center the brand ONLY when the links from the navbar are grouped in the hamburger menu
My HTML so far is as follows:
<!DOCTYPE=HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed navbar-right" 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>
MyBrand
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>User Profile</li>
<li>Selbstverwaltung</li>
<li>Einstellungen</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Abmelden</li>
<li> </li>
</ul>
</div>
</div>
</nav>
<script src="http://code.jquery.com/jquery-3.3.1.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
My css:
/*COLORING THE NAVBAR GREEN*/
.navbar-default
{
background-color: #199fa0;
}
/*CHANGING THE FONT COLOUR OF THE NAVBAR BUTONS*/
.navbar-default .navbar-nav li a
{
color: #fff
}
/*CHANGING THE COLOUR OF THE HAMBURGER BUTTON*/
.icon-bar
{
background-color:#fff !important;
}
.navbar-default .navbar-brand
{
color: #fff;
}
/*BRINGING THE HAMBURGER MENU BUTTON TO THE LEFT SIDE*/
.navbar-toggle
{
float: left;
margin-left: 14px;
}
add following code to your css
a.navbar-brand {
float: none;
display: table;
margin: auto;
}
/*COLORING THE NAVBAR GREEN*/
.navbar-default
{
background-color: #199fa0;
}
/*CHANGING THE FONT COLOUR OF THE NAVBAR BUTONS*/
.navbar-default .navbar-nav li a
{
color: #fff
}
/*CHANGING THE COLOUR OF THE HAMBURGER BUTTON*/
.icon-bar
{
background-color:#fff !important;
}
.navbar-default .navbar-brand
{
color: #fff;
}
/*BRINGING THE HAMBURGER MENU BUTTON TO THE LEFT SIDE*/
.navbar-toggle
{
float: left;
margin-left: 14px;
}
a.navbar-brand {
float: none;
display: table;
margin: auto;
}
<!DOCTYPE=HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed navbar-right" 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>
MyBrand
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>User Profile</li>
<li>Selbstverwaltung</li>
<li>Einstellungen</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Abmelden</li>
<li> </li>
</ul>
</div>
</div>
</nav>
<script src="http://code.jquery.com/jquery-3.3.1.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
Add the code to your css, the #media (max-width: 768px) means that it will only apply for small devices, when the hamburger menu appears.
#media (max-width: 768px)
.navbar-brand {
position: absolute;
z-index: 1;
top: 0;
left: 50%;
}
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed navbar-right" 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>
MyBrand
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>User Profile</li>
<li>Selbstverwaltung</li>
<li>Einstellungen</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Abmelden</li>
<li>
</li>
</ul>
</div>
</div>
</nav>
</body>
try this code
#media screen and (max-width: 767px)
{
.navbar-default .navbar-brand
{
width: calc( 100% - 44px );
width: -webkit-calc( 100% - 100px );
float: left;
text-align: center;
padding-right: 50px;
}
}
I'm trying to change the navbar's background color to blue and the links color to white. I am not able to change the links on the navbar to white. I'm not doing something right. Not sure what. Appreciate the help!
.navbar-default {
background-color: #2196f3;
}
.navbar a{
color:white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/index.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Shop</li>
<li>Drive</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode</li>
<li>Help/FAQ's</li>
<li>Conatct us</li>
</ul>
</div>
</nav>
<script src = "js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
You need to be more specific with your CSS rules. See Specificity
Working Example:
.navbar.navbar-default {
background-color: #2196f3;
}
.navbar.navbar-default ul > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Shop
</li>
<li>Drive
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode
</li>
<li>Help/FAQ's
</li>
<li>Conatct us
</li>
</ul>
</div>
</div>
</nav>
Bootstrap have many default style.
You code is not working is because bootstrap override your css(same as #Kirito mention).
You can change css to this, it work:
.navbar div{
background-color: #2196f3 !important;
}
.navbar a{
color:white !important;
}
However, better solution is customize your bootstrap. link: http://getbootstrap.com/customize/
This approach will get cleaner code and less problem
Remove the .navbar a rule set and add:
/* change brand text color */
.navbar-default .navbar-brand
{
color:white;
}
/* change list links text color */
.navbar-default .navbar-nav > li > a
{
color:white;
}
You need to be more specific about your selectors or other selectors (defined in bootstrap's CSS) will apply as they are likely more specific
This is all better explained in the specificity rules
See sample code below.
nav.navbar-default {
background-color: #2196f3;
background-image: none;
}
nav.navbar-default .navbar-brand,
nav.navbar-default .navbar-nav>li>a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Shop
</li>
<li>Drive
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode
</li>
<li>Help/FAQ's
</li>
<li>Conatct us
</li>
</ul>
</div>
</nav>
</html>
Does anyone know how to change the navbar such that there's less white space above/below the text. I already tried creating a negative buffer but that didn't seem to work.
Also if anybody knows how to change the navbar to a button(as often mobile sites have) so that it doesn't take up the entire height of the page that would be useful.
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<body>
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</div>
</nav>
<style>
text-align:justify;
</style>
</div>
</div>
</body>
This will do it.
ul.nav li a>h2 {
margin-top: 0;
margin-bottom: 0;
}
Here's a fiddle: https://jsfiddle.net/ypfhs1gn/1/
Also, to fix your HTML:
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</nav>
</div>
</div>
UPDATE: Additionally, here's that fiddle updated to get you that menu button: https://jsfiddle.net/ypfhs1gn/2/
<nav class="navbar navbar-default">
<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" 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>
</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 nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'd try setting up a CSS rule for nav > ul containing top/bottom margin and/or padding settings, starting from 0 and (if that has an effect) then changing it to a value you like.
I'm trying to get my hands onto some web designing and I was not able to figure out how to make the navigation buttons in my project centered. I would like the buttons from Home to Page 3 centered and was wondering if there was a simple way to do that in the HTML file alone without needing a separate CSS class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website Name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Make some changes in Bootstrap.CSS
May be like this...
.nav navbar-nav
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
Check here => bootply
The only way you can accomplish this is by adjusting some CSS properties. Basically remove the float from navbar-nav and center the text. But if you really want them to be centered, you have to account for the navbar-brand class by assigning it a width and adding a negative margin equal to half that width to the navbar-nav.
See working Example Snippets.
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Mobile Center
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
#media (max-width: 767px) {
.navbar-default .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 150px;
text-align: center;
top: 0;
}
.navbar.navbar-default > .container .navbar-brand.navbar-brand-centered,
.navbar.navbar-default > .container-fluid .navbar-brand.navbar-brand-centered {
margin-left: -75px;
margin-top: 0;
margin-bottom: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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 navbar-brand-centered" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Using this css will get your navigation button in center position.
navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
DEMO