Image on bootstrap navbar to stick out above and below menu bar - html

How can I make a bootstrap navbar like that: Navbar
The image should be centered on the navbar.
Here is what I have currently:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">
<img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg">
</a>
<div class="nav-collapse collapse">
<ul class="nav pull-left">
<li class="active">
Home
</li>
<li>
Pricing
</li>
<li>
FAQ
</li>
</ul>
</div>
This is the CSS that accompanies the above code:
.navbar-inner{
position:relative;
padding-left:70px;
}
.navbar .brand {
margin-left: 0px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
position: absolute;
width: 50px;
background: #f00;
left: 0px;
top: 0px;
padding: 10px;
}
That's my new code: http://www.bootply.com/gEoN0zJ3e8
How can I make the image centered?

Here's one way you can do this by using position:absolute to place your image. Depending on what you plan on doing for mobile, you'll have to adjust your navbar according (the example assumes the default Bootstrap behavior).
Working Example:
nav.navbar {
margin-top: 50px;
margin-bottom: 65px;
border: 0;
}
nav.navbar .navbar-collapse {
border: 0;
}
nav.navbar .navbar-brand {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: -50px;
transform: translateX(-50%);
padding: 0px;
}
nav.navbar .navbar-brand img {
height: 150px;
width: 150px;
margin-left: -50px;
}
#media only screen and (min-width: 768px) {
nav.navbar {
margin-top: 65px;
margin-bottom: 80px;
min-height: 20px;
height: 20px;
}
nav.navbar .navbar-nav > li > a {
font-size: 12px;
padding: 0px 10px;
}
nav.navbar .navbar-brand {
top: -65px;
}
}
#media only screen and (max-width: 767px) {
nav.navbar .navbar-nav {
margin-top: 50px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x150/b71c1c/fff?text=LOGO">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Pricing
</li>
<li>FAQ
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-info">
Content
</div>
</div>
<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>

Here is the code. Adding class to image and adding some css style. You can change position editing .imgc class properties. Enjoy
.menu-container {
background-color:#000000;
height:40px;
}
.navbar-collapse { padding: 1px 30px;}
.navbar-brand {position:absolute;margin-top:-60px;}
.navbar-collapse {
margin-top: 100px;
margin-left: 120px;
color: #fff;
}
.imgc {margin-top:-2px;}
#nav.affix {
position:fixed;
top:0;
width:100%;
z-index:10
}
#sidebar.affix-top {
position:static
}
#sidebar.affix {
position:fixed;
top:80px
}
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="menu-container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"><span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span></a> <a class="navbar-brand" href="#"><img class="imgc" alt="" src="http://placehold.it/150x150&text=Logo"></a>
<div class="navbar-collapse collapse">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>

Related

Bootstrap navigation logo on center

I try to design a centered logo navigation but i have some output problems
.navbar {
background-color: #231f20;
min-height: auto;
position: relative;
top: 0px;
font-size: 13px;
width: auto;
border-bottom: none;
margin-bottom: 0px;
padding: 40px 0px;
}
.navbar-brand {
padding: 0 15px;
height: 96px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 126px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 40px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 50px;
}
}
/////
<nav class="navbar navbar-default">
<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 hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Who We Are</li>
<li>Our Food</li>
<li class="hidden-xs"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></li>
<li>Book a Table</li>
<li>Promotions</li>
</ul>
</div>
</div>
</nav>
Also, demo at http://codepen.io/anon/pen/egqxjW
What is the problem that is causing that white space?
PS: Is there a better way to get the same result? What should i do to include the logo only once in the source code?
right: -50%; moved the ul 50% to the right of where it should be. Its width stay the same (100% of the container), and it's moved by 50% to the right, so 50% of the ul is outside of the container, bleeding out of screen.
I made some change to achieve the same result you want, using text-align: center and display: inline-block instead. They are marked with /* change */ in the CSS.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
.navbar {
background-color: #231f20;
min-height: auto;
position: relative;
top: 0px;
font-size: 13px;
width: auto;
border-bottom: none;
margin-bottom: 0px;
padding: 40px 0px;
}
.navbar-brand {
padding: 0 15px;
height: 96px;
}
#media (min-width: 768px) {
ul.navbar-nav {
position: relative;
float: none;
/* change */
text-align: center;
/* change */
}
ul.navbar-nav>li {
position: relative;
display: inline-block;
/* change */
vertical-align: middle;
float: none;
}
ul.navbar-nav>li a {
line-height: 126px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav>li a {
padding: 0 40px;
}
}
#media (min-width: 1200px) {
.navbar-nav>li a {
padding: 0 50px;
}
}
<nav class="navbar navbar-default">
<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 hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Who We Are</li>
<li>Our Food</li>
<li class="hidden-xs">
<img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" />
</li>
<li>Book a Table</li>
<li>Promotions</li>
</ul>
</div>
</div>
</nav>
You have in your style a rule which is setting right: -50% on the navbar. Unfortunately, since the UL navbar displays as a block you wind up with an element that is 100% moving to the right 50% and winding up offscreen.
Instead of messing with right relative positioning you should try the navbar-right bootstrap class. Like so:
<ul class="nav navbar-nav navbar-right">
Most of the layouts from bootstrap play with floats, so you can't just use relative positioning expecting it to behave the same way.
Lastly you should compare it with the official documentation responsive navbar example here: https://getbootstrap.com/components/#navbar
You can see the resulting example here: http://codepen.io/anon/pen/NdQJRb

Remove extra space after navbar bootstrap

I tried this code to create a bootstrap navigation with logo centered inside the nav bar but I'm getting an extra space on the right side of the page.
I want to fix the extra space after the navigation bar.
With this code the pages scrolls to an empty space to the right, the page should fit the navbar no extra.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
.navbar {
text-transform: uppercase;
background-color: #27B6C9;
position: relative;
top: 0px;
font-size: 14px;
border-bottom: none;
margin-bottom: 0px;
padding: 0px 0px;
font-weight: 600;
}
.navbar-brand {
padding: 0 10px;
height: auto;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 126px;
vertical-align: middle;
padding: 0 18px;
}
}
#media (min-width: 892px) {
.navbar-nav > li a {
padding: 0 30px;
}
}
#media (min-width: 1100px) {
.navbar-nav > li a {
padding: 0 40px;
}
}
<nav class="navbar navbar-default">
<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 hidden-sm hidden-md hidden-lg" href="#">
<img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="WPO LOGO" width="80" />
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services
</li>
<li>Policies
</li>
<li class="hidden-xs">
<a href="#">
<img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="Brand" width="80" />
</a>
</li>
<li>Calendar
</li>
<li>FAQ
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
i add new class mr0 and add it in your button navbar
copy this class in your css and relpace your button
.mr0{
margin-right:0pxImportant;
}
<button type="button" class="navbar-toggle mr0" data-toggle="collapse"

Content inside a div block not aligning vertically

I have a fixed-top navigation bar with content inside that needs to be center aligned vertically. Additionally, I'm using bootstrap to me design my page. The navigation bar has two major content blocks. One is an image as my nav header and one has a container of an with links.
The container I wrapped around the two does not have any vertical padding and only has margins for content going underneath it.
<!--Navigation Bar-->
<nav class="navbar navbar-default navbar-fixed-top navbar-wrap">
<div class="container-fluid">
<div class="navbar-header">
<img src="img/logo.png" />
</div>
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
What I have tried doing is set the .container-fluid>ul to be relative to the container and set the margin to auto. I do not want to have a fixed margin or padding for it since I want the site to scale well even on mobile devices (hence why I'm using bootstrap).
I am a very amateur developer and just trying to get a site off the ground so I can showcase my projects from school and side gigs.
Thanks in advanced, if you would like to see my CSS. I can edit it in too.
http://imgur.com/pXcwav3
.navbar-wrap {
padding: 0;
background-color: #77B69C;
}
.nav {
padding-right: 15px;
}
.navbar-right {
margin-right: 0;
}
.container-fluid>ul {
position: relative;
height: 100%;
margin: auto;
}
.navbar-default .navbar-nav>li>a {
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar-default .navbar-nav>li>a:hover {
color: #171F26;
background-color: #fff;
}
There are multiple ways you can handle this depending on what makes most sense.
1) You could actually use text and adjust it with CSS like in the first
navbar example.
2) You can constrain the image to the navbars default height like in
example 2.
3) And you can adjust the height and line height like in example 3 for an
image that exceeds the height of the navbar.
** Also, if you are using a preprocessor (LESS or SASS) you can easily adjust the height and the rest is handled.
I also inserted the HTML so your navbar collapses (Navbar Docs)under 768px into the mobile configuration (unsure if the omission was meant or not).
(if you do use the 2nd or 3rd option just remove the margin-top class from navbar-wrap* so the nav is fixed to the top again.)
#import url(https://fonts.googleapis.com/css?family=Hind+Vadodara);
/**Text CSS**/
.navbar.navbar-wrap {
background: #77B69C;
}
.navbar a.navbar-brand,
.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus {
font-family: 'Hind Vadodara', sans-serif;
font-size: 30px;
color: #000;
letter-spacing: 5px;
}
.navbar .navbar-brand span.lname {
color: #fff;
}
.navbar.navbar-wrap .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
#media (min-width: 768px) {
.navbar.navbar-wrap .navbar-right {
margin-right: 15px;
}
.navbar.navbar-wrap .navbar-brand {
margin-left: 15px;
}
}
/**IMG CSS**/
.navbar.navbar-wrap2 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap2 .navbar-brand img {
height: 50px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap2 {
background: #77B69C;
margin-top: 200px;
}
.navbar.navbar-wrap2 .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap2 .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
.navbar.navbar-wrap2 .navbar-brand img {
margin-left: 15px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap2 .navbar-right {
margin-right: 15px;
}
}
/**LARGE IMG CSS**/
.navbar.navbar-wrap3 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
height: 75px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap3 {
background: #77B69C;
margin-top: 400px;
}
.navbar.navbar-wrap3 .navbar-header {
height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
margin-top: 20px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap3 .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
.navbar.navbar-wrap3 .navbar-brand img {
margin-left: 15px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap3 .navbar-right {
margin-right: 15px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
line-height: 45px;
}
}
<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 navbar-wrap navbar-fixed-top">
<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-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="#"><span class="fname">James</span> <span class="lname">Wong</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap2 navbar-fixed-top">
<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-nav2" 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="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav2">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap3 navbar-fixed-top">
<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-nav3" 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="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav3">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Bootstrap Nav Disappears on Resize

I have a Bootstrap 3 navbar. When I scale the browser window to a low resolution or access the page with my mobile I have no menu. Usually, with Bootstrap I have a collapsed navigation but it is nowhere to be found.
Here is the HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><img src="images/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="aktiv" >Advertisers</li>
<li>Publishers</li>
<li>About</li>
<li>Press</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar {
background-color: #333E48;
border: 0;
display: block!important; /* From Stack Overflow */
}
.navbar-brand > img,
.navbar-brand {
padding:0px;
margin:0;
}
.navbar-brand > img {
padding: 4px;
height: 50px;
margin: auto;
vertical-align: middle;
display: inline-block;
}
.navbar-brand,
.navbar-nav li a {
line-height: 90px;
height: 90px;
padding-top: 0px;
}
.nav-collapse.collapse {
height: auto !important; /* From Stack Overflow */
overflow: visible !important; /* From Stack Overflow */
}
I added display: block!important; to .navbar after reading Nav disappears after resize
I added height: auto !important; overflow: visible !important; to .nav-collapse.collapse after reading Twitter bootstrap responsive navigation disappears after opening and closing
Issue still persists.
It isn't clear in your question but your missing the toggle button to open and close the menu when your viewport is reduced, otherwise the mobile menu will always be open.
nav.navbar-default {
background: #333E48;
border: 0;
}
.navbar-default .navbar-brand > img,
.navbar-default .navbar-brand {
padding: 0px;
margin: 0;
}
.navbar-default .navbar-brand > img {
padding: 4px;
height: 50px;
margin: auto;
vertical-align: middle;
display: inline-block;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav li a {
line-height: 90px;
height: 90px;
padding-top: 0px;
}
.navbar-default .nav-collapse.collapse {
height: auto !important;
/* From Stack Overflow */
overflow: visible !important;
/* From Stack Overflow */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-collapse" 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="index.php">
<img src="http://placehold.it/100x50/fff/fff" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li class="aktiv">Advertisers
</li>
<li>Publishers
</li>
<li>About
</li>
<li>Press
</li>
</ul>
</div>
</div>
</nav>
Just have to remove the collapse class on div#navbar
Here is a fiddle
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><img src="images/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="aktiv" >Advertisers</li>
<li>Publishers</li>
<li>About</li>
<li>Press</li>
</ul>
</div>
</div>
</nav>
And rewrite the css for the xs view

Keep Navbar Brand in One position on Window Resize

I am trying to make my navigation bar stay in the same position even after resizing the window. It continues to move on resize and therefore the Navigation Bar and Nav brand are not aligned the way I want:
HTML:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="logo">
<center>
<a class="navbar-brand" href="#"><img src="Final.png"/></a>
</center>
</div>
<div>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Our Prices</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
CSS:
.nav, .navbar-nav {
display: inline-block;
margin:0;
float:none;
margin-top: -15px;
}
.navbar-nav li {
padding-left: 20px;
padding-right: 20px;
}
.navbar-nav li:hover {
background-color: #3c3c3c;
}
.navbar-nav {
color:red;
}
.navbar-brand {
float: none;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.logo img {
height:80px;
margin-top: -15px;
}
.logo {
width: 40%;
margin: 0 auto;
}