I am having a problem to order my navigation bar. I want to make navigation bar in horizontal style, but it's like a table now! I found this kind of navigation bar in: http://cssdeck.com/labs/navigation-dropdown-with-flip-effect, but it didn't show how can i make a complete horizontal navigation bar with that effect. How can i fix it?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<title>Navigation Bar</title>
</head>
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼ </a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My Css:
body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home ▼ </a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">About ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</div>
</div>
</div>
Do you means this, here is your code
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home ▼ </a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">About ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Contact ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</div>
</div>
</div>
css:
body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
Related
I am the senior webpage editor at my High School, and per request of the admin, we are working on a new website. I need to remove the white border around the dropdown menus I'm putting on the site.
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
table tr:nth-child(odd) {
background-color: #eee
}
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 10px auto;
background: #FF0000;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<html>
<head>
<link rel="shortcut icon" href="images\pantherpaw.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="stiglerstylesheet.css" />
</head>
<body style="background-color:black;color:white;padding:5px;" font="century gothic">
<div align="center">
<img src="images\websitelogoother2.png" alt="Stigler Public Schools" style="width:50%;" align="middle">
<table>
<tr>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #1</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #2</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #3</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
And Here is the result I'm getting
I need to remove the white space around the dropdown menus, thank you.
A smart trick will be to remove this css part
table tr:nth-child(odd) {
background-color: #eee;
}
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
/*table tr:nth-child(odd) {
background-color: #eee
}*/
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 10px auto;
background: #FF0000;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<html>
<head>
<link rel="shortcut icon" href="images\pantherpaw.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="stiglerstylesheet.css" />
</head>
<body style="background-color:black;color:white;padding:5px;" font="century gothic">
<div align="center">
<img src="images\websitelogoother2.png" alt="Stigler Public Schools" style="width:50%;" align="middle">
<table>
<tr>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #1</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #2</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
<td>
<ul class="navigation">
<a class="main" href="#url">Navigation #3</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
I changed your margin in the navigation class to remove the 10px and removed background-color. I applied your desired background color to the td because some of the whitespace is cellpadding generated by the table cells. I also removed the padding because it made your dropdown menu look smaller.
.navigation
{
list-style: none;
padding: 0;
width: 250px;
height: 40px;
/*margin: 10px auto;*/
/*background: #FF0000;*/
margin: 0px auto;
}
td
{
font-family: century gothic;
border: 1px solid black;
/*padding: 5px 5px 5px 5px;*/
text-align: center;
font-size: 1em;
background-color: #FF0000;
}
Note - Portions of your html was red highlighted in my editor, some misspelled styles and naughty html and css in there. I recommend using an editor which will warn you of naughty code.
I want to make my "Poem From Me" and "Poem From Internet" drop down list going to under "Poems" section which is under About option. But now there is problem in there. This drop down list is behind "About" drop down list and i want to move it to the left next "Poems" option (I tried to use margin-left:250px) but it didn't work). I also want that whenever the person over his mouse on the "Poems" section the "Poem From Internet" and "Poem From Me" appears not the time that i hover over the "About" section! http://jsfiddle.net/2r1hbr3k/2/embedded/result/, http://jsfiddle.net/2r1hbr3k/2/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="Photo.ico">
<link href="StyleSheet.css" rel="stylesheet" />
<link href="animate.css" rel="stylesheet" />
<link href="animations.css" rel="stylesheet" />
<link href="hover.css" rel="stylesheet" />
<link href="gooeymenu.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="gooeymenu.js"></script>
<title>Social Activism</title>
</head>
<body>
<div style="background:#F5F5F0;">
<div>
<div style="float:left; margin-top:0; left:20px;"><img class="buzz" src="community-activism.png" width="80" height="80" /></div>
<h1 style="color:black; opacity:40;" class="shrink"><strong> Social Activism</strong></h1>
</div>
<br />
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
</div>
<div>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">About ▼</a>
<li class="n1" id="selection">
Poems ►
<ul>
<li class="n6">
Poem From Internet
</li>
<li class="n7">
Poem By Me
</li>
</ul>
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
<li class="n5" id="selection">
Me
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">From Internet ▼ </a>
<li class="n1" id="selection">
Poem
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">By Me ▼</a>
<li class="n1" id="selection">
Poem
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My CSS File:
body {
background: #DCDCD8;
}
h2 {
text-align: center;
color: #CCC;
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #F5F5F0;
position: relative;
z-index: 100;
display: inline-block;
vertical-align:top;
left:5px;
top:0px;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 14px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#option:hover ,#blue:hover {
color: white;
background-color:#19A3FF;
}
#option:active {
color: white;
background-color:#1c5f8d;
}
#blue:active {
color: white;
background-color: #1c5f8d;
}
#option {
color: black;
}
#blue {
color: black;
}
Is this what you meant?
.navigation ul {
display: none;
position: relative;
top: -40px;
left: 250px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navigation li:hover ul {
display: block;
}
Here's a fiddle: http://jsfiddle.net/Niffler/bxuv14Ld/
I am having a problem to order my navigation bar. I want to make navigation bar in horizontal style, but it's like a table now! I found this kind of navigation bar in: http://cssdeck.com/labs/navigation-dropdown-with-flip-effect, but it didn't show how can i make a complete horizontal navigation bar with that effect. At the same time i need to add that i want to make my Home and About section free of drop down list! How can i fix it?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<title>Navigation Bar</title>
</head>
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼ </a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My Css:
body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display:inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
One solution is to use display: table-cell to li elements like:
body {
background: #E9E9E9;
}
h2 {
text-align: center;
color: #CCC;
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation li {
width: 250px;
height: 40px;
display: table-cell;/*add display table-cell*/
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation"> <a class="main" href="#url">Home</a>
</ul>
<ul class="navigation"> <a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation"> <a class="main" href="#url">Navigation ▼ </a>
<li class="n1">item #1
</li>
<li class="n2">item #2
</li>
<li class="n3">item #3
</li>
<li class="n4">item #4
</li>
<li class="n5">item #5
</li>
</ul>
<ul class="navigation"> <a class="main" href="#url">Navigation ▼</a>
<li class="n1">item #1
</li>
<li class="n2">item #2
</li>
<li class="n3">item #3
</li>
<li class="n4">item #4
</li>
<li class="n5">item #5
</li>
</ul>
</div>
</div>
</div>
</body>
I am having a problem to order my navigation bar. I want to make navigation bar in horizontal style, but it's like a table now!
I found this kind of navigation bar in: http://cssdeck.com/labs/navigation-dropdown-with-flip-effect,
but it didn't show how can i make a complete horizontal navigation bar with that effect.
At the same time i need to add that i want to make my Home and About section free of drop down list!
How can i fix it? (I don't want to make my options horizontal just my About and Home bottom)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" />
<title>Navigation Bar</title>
</head>
<body>
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
<div>
<ul class="navigation">
<a class="main" href="#url">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url">About</a>
</ul>
</div>
<div>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼ </a>
<li class="n1">
item #1
</li>
<li class="n2">
item #2
</li>
<li class="n3">
item #3
</li>
<li class="n4">
item #4
</li>
<li class="n5">
item #5
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Navigation ▼</a>
<li class="n1">
item #1
</li>
<li class="n2">
item #2
</li>
<li class="n3">
item #3
</li>
<li class="n4">
item #4
</li>
<li class="n5">
item #5
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My CSS:
body {
background: #E9E9E9;
}
h2 {
text-align: center;
color: #CCC;
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #95C11F;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation,
.navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
You just need two steps:
To avoid the table effect: place all the lists under the same div instead of in two different divs as it is right now.
To place all the menu items on the same height, add the vertical-align:top; to the navigation class.
You can see it working here: http://jsfiddle.net/0essn7yv/ (I changed the width from 250px to 150px to make the menu fit better in the small screen).
I am trying to use the collapse function in Bootstrap after watching some tutorials I tried it out myself and I am left with no links showing on a large viewport.
Here is my code does anbody notice anything that might be wrong with it?
The HTML:
<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="100" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand"></a>
</div>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Used Cars
</li>
<li>Get Finance
</li>
<li class="dropdown">About Driven<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
<a href"#">The Team</a>
</li>
<li>
<a href"#">Our Partners</a>
</li>
</ul> <!--Drop Down End-->
</li>
<li>How To Find Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
The custom CSS:
.logo-nav {
height: 2.3em;
width: auto;
}
.brand {
font-size: 2em;
margin: 20px 0 25px;
}
.navbar-brand {
opacity: 0;
color: #ff0066;
-webkit-transition:opacity 0.3s ease-in;
-moz-transition:opacity 0.3s ease-in;
-o-transition:opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
margin-left: 0px;
}
.navbar {
border-radius: 0px;
border-left: none;
border-right: none;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar- default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #DD3B4D;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #fff;
}
.dropdown-menu {
color: #fff;
background-color: #DD3B4D;
}
.dropdown-menu>li>a {
color: #fff;
}
nav.affix {
top: 0;
width: 100%;
z-index: 1000;
}
nav.affix .navbar-brand {
opacity: 1;
height: 2.3em;
width: auto;
}
.navbar-header {
width: 0px;
-webkit-transition:width .4s ease-in-out;
-moz-transition:width .4s ease-in-out;
-o-transition:width .4s ease-in-out;
transition:width .4s ease-in-out;
margin: 0 1em 0 1em
}
nav.affix .navbar-header {
width: 8em;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
margin: 0 1em 0 0;
}
.nav-links {
font: 600 15px/1.5 'Arimo';
}
.navbar-nav > li:last-child{
border-right: 1px solid #475d88;
}
ul.nav a:hover {
color: #fff !important;
background-color: #DD3B4D !important;
-webkit-transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
transition: background-color 0.6s ease;
}
nav.affix .navbar-brand {
display: inline-block;
}
Sorry for the amount of CSS I didn't realise how much there was ha.
I have had a good play about and can't seem to stop this from happening.
Remove the collapse class
Link http://jsfiddle.net/LvhCh/1/
<div class="nav-collapse navbar-responsive-collapse" data-toggle="collapse" data-target=".navbar-nav">