Can you have a look here? http://jsfiddle.net/c0w27sbe/ I am trying to center vertically the left navigation, as at the moment is on top of the container.
html:
<nav id="topNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Responsive navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- top navigation-->
<ul class="nav navbar-nav navbar-left col-md-16 col-sm-16 col-xs-16">
<li>
<a href="">Manufracturer<br>Approved</a>
</li>
<li>
<a href="">Customer 1st<br>We'll visit you</a>
</li>
<li>
<a href="">Excess<br>SAFE</a>
</li>
<li>
<a href="">Friendly Form-<br>Free Help</a>
</li>
<li>
<a href="">FREE-<br>Accident Management</a>
</li>
</ul>
<!-- Social media icons -->
<ul class="nav navbar-nav navbar-right col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
<li>
<a href="#facebook"><i class="icon icon-facebook"></i></a>
</li>
<li>
<a href="#googleplus"><i class="icon icon-twitter"></i></a>
</li>
<li>
<a href="#twitter"><i class="icon icon-youtube"></i></a>
</li>
</ul>
<!-- End navbar-right -->
<div class="clearfix"></div>
</div>
<!-- End navbar-collapse-1 -->
</div>
<!-- End container-fluid -->
</nav>
css
#topNavigation.navbar-default {
background:black;
text-align: center;
font-family:'Droid Sans', sans-serif;
font-weight:700;
font-size:1.2em;
}
#topNavigation.navbar-default .navbar-nav {
border: 1px solid yellow;
}
#topNavigation ul.nav:nth-child(2) > li > a {
border-right:none;
box-shadow:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
padding:0;
}
#topNavigation ul.nav:nth-child(2) > li {
float:none;
display:inline-block;
}
#topNavigation ul.nav:nth-child(2) > li > a > i {
font-size:3em;
line-height: 1.2;
color: #808080;
background-color: #fff;
border-radius: 50%;
box-shadow: 1px 0px 0px 1px #808080 inset;
}
#topNavigation ul.nav:nth-child(2) {
height: 100%;
vertical-align: middle;
display: inline-block; }
#topNavigation ul.nav:first-child {
margin: 0;
vertical-align: middle;
display: inline-block;
}
#topNavigation ul.nav:first-child li a {
padding:0;
}
.navbar-nav > li {
float: left;
}
It is some styles on bootstrap.css, but I can't find what it is so I can counteract it :S
You will see, if you delete the bootstrap.css from the external resources it works as I want!
Thank you
Well, its this CSS property (defined in the booststrap.min.css) that's causing you problems :
.navbar-toggle {
float: right;
}
You have two possible solutions for this :
Option 1 : Modify the HTML code
You can do the following if you have control over the html :
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1" style="float: none;" />
Option 2 : Make a CSS Change
You can add the following class in your custom CSS if you do not have control over the html :
button[data-target="#navbar-collapse-1"] {
float: none;
}
Option 1 Fiddle : Observe the HTML change (Option 1) below :
body {
}
/*top navigation*/
#topNavigation.navbar-default {
/*background: #f9540a;*/
background:black;
text-align: center;
font-family:'Droid Sans', sans-serif;
font-weight:700;
font-size:1.2em;
}
/*
#mainNavigation .navbar-header {
float: left;
text-align: center;
height:auto;
}
#mainNavigation .navbar-brand {
height: auto;
padding:0;
}*/
/*
#mainNavigation .container-fluid{
height:auto;
overflow:auto;
}*/
/*
.navbar-brand img{
float:left;
}
*/
/*
#topNavigation.navbar-default .navbar-nav > li {
padding: 20px 10px;
}*/
#topNavigation.navbar-default .navbar-nav { border: 1px solid yellow;}
/*#topNavigation.navbar-default .navbar-nav > li > a {
color: #fff;
border-right:2px solid #d93700;
box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
-webkit-box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
-moz-box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
padding: 0 20%;
}*/
#topNavigation.navbar-default .navbar-nav > li > a:hover {
color: #808080;
}
#topNavigation ul.navbar-nav{
}
#topNavigation ul.nav:nth-child(2) > li > a {
border-right:none;
box-shadow:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
padding:0;
}
#topNavigation ul.nav:nth-child(2) > li {
float:none;
display:inline-block;
}
#topNavigation ul.nav:nth-child(2) > li > a > i {
font-size:3em;
line-height: 1.2;
color: #808080;
background-color: #fff;
border-radius: 50%;
box-shadow: 1px 0px 0px 1px #808080 inset;
}
#topNavigation ul.nav:nth-child(2) {
height: 100%;
vertical-align: middle;
display: inline-block; }
#topNavigation ul.nav:first-child {
margin: 0;
vertical-align: middle;
display: inline-block; }
#topNavigation ul.nav:first-child li a {
padding:0;
}
.navbar-nav > li {
float: left;
}
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?rdonbp');
src:url('../fonts/icomoon.eot?rdonbp#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?rdonbp') format('truetype'),
url('../fonts/icomoon.woff?rdonbp') format('woff'),
url('../fonts/icomoon.svg?rdonbp#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-approved:before {
content: "\e800";
}
.icon-facebook:before {
content: "\e801";
}
.icon-phone:before {
content: "\e802";
}
.icon-tick:before {
content: "\e803";
}
.icon-twitter:before {
content: "\e804";
}
.icon-youtube:before {
content: "\e805";
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<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"/>
<body>
<!-- Navigation bar -->
<nav id="topNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Responsive navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1" style="float: none;"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- top navigation-->
<ul class="nav navbar-nav navbar-left col-md-16 col-sm-16 col-xs-16">
<li>
<a href="">Manufracturer<br>Approved</a>
</li>
<li>
<a href="">Customer 1st<br>We'll visit you</a>
</li>
<li>
<a href="">Excess<br>SAFE</a>
</li>
<li>
<a href="">Friendly Form-<br>Free Help</a>
</li>
<li>
<a href="">FREE-<br>Accident Management</a>
</li>
</ul>
<!-- Social media icons -->
<ul class="nav navbar-nav navbar-right col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
<li>
<a href="#facebook"><i class="icon icon-facebook"></i></a>
</li>
<li>
<a href="#googleplus"><i class="icon icon-twitter"></i></a>
</li>
<li>
<a href="#twitter"><i class="icon icon-youtube"></i></a>
</li>
</ul>
<!-- End navbar-right -->
<div class="clearfix"></div>
</div>
<!-- End navbar-collapse-1 -->
</div>
<!-- End container-fluid -->
</nav>
<!--
<nav id="mainNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2"> <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="navbar-brand">
<img src="images/advance_logo.png" alt=""/>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Accident<br>Management</a>
</li>
<li>
<a href="">Approved<br>Manufacturers</a>
</li>
<li>
<a href="">Our<br>Services</a>
</li>
<li>
<a href="">About<br>Advance</a>
</li>
<li>
<a href="">Contact<br>Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
<div class="clearfix"></div>
</div>
</nav>
-->
</body>Option 2 Fiddle :Observe the CSS change (Option 2) below :
body {
}
/*top navigation*/
#topNavigation.navbar-default {
/*background: #f9540a;*/
background:black;
text-align: center;
font-family:'Droid Sans', sans-serif;
font-weight:700;
font-size:1.2em;
}
/*
#mainNavigation .navbar-header {
float: left;
text-align: center;
height:auto;
}
#mainNavigation .navbar-brand {
height: auto;
padding:0;
}*/
/*
#mainNavigation .container-fluid{
height:auto;
overflow:auto;
}*/
/*
.navbar-brand img{
float:left;
}
*/
/*
#topNavigation.navbar-default .navbar-nav > li {
padding: 20px 10px;
}*/
#topNavigation.navbar-default .navbar-nav {
border: 1px solid yellow;
}
/*#topNavigation.navbar-default .navbar-nav > li > a {
color: #fff;
border-right:2px solid #d93700;
box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
-webkit-box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
-moz-box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
padding: 0 20%;
}*/
#topNavigation.navbar-default .navbar-nav > li > a:hover {
color: #808080;
}
#topNavigation ul.navbar-nav {
}
#topNavigation ul.nav:nth-child(2) > li > a {
border-right:none;
box-shadow:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
padding:0;
}
#topNavigation ul.nav:nth-child(2) > li {
float:none;
display:inline-block;
}
#topNavigation ul.nav:nth-child(2) > li > a > i {
font-size:3em;
line-height: 1.2;
color: #808080;
background-color: #fff;
border-radius: 50%;
box-shadow: 1px 0px 0px 1px #808080 inset;
}
#topNavigation ul.nav:nth-child(2) {
height: 100%;
vertical-align: middle;
display: inline-block;
}
#topNavigation ul.nav:first-child {
margin: 0;
vertical-align: middle;
display: inline-block;
}
#topNavigation ul.nav:first-child li a {
padding:0;
}
.navbar-nav > li {
float: left;
}
@font-face {
font-family:'icomoon';
src:url('../fonts/icomoon.eot?rdonbp');
src:url('../fonts/icomoon.eot?rdonbp#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?rdonbp') format('truetype'), url('../fonts/icomoon.woff?rdonbp') format('woff'), url('../fonts/icomoon.svg?rdonbp#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family:'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-approved:before {
content:"\e800";
}
.icon-facebook:before {
content:"\e801";
}
.icon-phone:before {
content:"\e802";
}
.icon-tick:before {
content:"\e803";
}
.icon-twitter:before {
content:"\e804";
}
.icon-youtube:before {
content:"\e805";
}
button[data-target="#navbar-collapse-1"] {
float: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<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"/>
<body>
<!-- Navigation bar -->
<nav id="topNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Responsive navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- top navigation-->
<ul class="nav navbar-nav navbar-left col-md-16 col-sm-16 col-xs-16">
<li> <a href="">Manufracturer<br>Approved</a>
</li>
<li> <a href="">Customer 1st<br>We'll visit you</a>
</li>
<li> <a href="">Excess<br>SAFE</a>
</li>
<li> <a href="">Friendly Form-<br>Free Help</a>
</li>
<li> <a href="">FREE-<br>Accident Management</a>
</li>
</ul>
<!-- Social media icons -->
<ul class="nav navbar-nav navbar-right col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
<li> <a href="#facebook"><i class="icon icon-facebook"></i></a>
</li>
<li> <a href="#googleplus"><i class="icon icon-twitter"></i></a>
</li>
<li> <a href="#twitter"><i class="icon icon-youtube"></i></a>
</li>
</ul>
<!-- End navbar-right -->
<div class="clearfix"></div>
</div>
<!-- End navbar-collapse-1 -->
</div>
<!-- End container-fluid -->
</nav>
<!-- <nav id="mainNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2"> <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="navbar-brand">
<img src="images/advance_logo.png" alt=""/>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Accident<br>Management</a>
</li>
<li>
<a href="">Approved<br>Manufacturers</a>
</li>
<li>
<a href="">Our<br>Services</a>
</li>
<li>
<a href="">About<br>Advance</a>
</li>
<li>
<a href="">Contact<br>Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
<div class="clearfix"></div>
</div>
</nav>
-->
</body>Hope this helps!!!