Hello.
I´m implementing a navbar on a site. I have used this navbar before (lower part of pic) and I´m now trying to use it again exactly as before.
The problem is that it´s stacking vertically and not horizontally (upper part of pic).
I can´t figure out why!
I´m using exactly the same HTML and CSS as the working one, but to no avail.
Can someone help me out?
Here´s the examples and the code I´m using.
I´m implementing a navbar on a site. I have used this navbar before (lower part of pic) and I´m now trying to use it again exactly as before.
The problem is that it´s stacking vertically and not horizontally (upper part of pic).
I can´t figure out why!
I´m using exactly the same HTML and CSS as the working one, but to no avail.
Can someone help me out?
Here´s the examples and the code I´m using.
HTML:
<div class="header">
<div class="nav">
<div class="container red topBotomBordersOut">
<a href="#">HOME</a>
<a href="#">SERVICES</a>
<a href="#">ABOUT</a>
<a href="#">CONTACT</a>
</div>
</div>
</div>
CSS:
.header {
background-color: rgba(27,61,95,0.90);
height: 35px;
line-height: 35px;
border-bottom: 3px solid #c3944b;
}
CSS:
/* NAV */
.nav{
margin: auto;
max-width: 1920px;
}
.nav a
{
color: #FFF;
text-decoration: none;
font: 14px Raleway;
margin: 0px 0px 0px 20px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
}
/* NAV ANIMATION */
.topBotomBordersOut a:before, div.topBotomBordersOut a:after
{
position: absolute;
left: 0px;
width: 100%;
height: 2px;
background: #c3944b;
content: "";
opacity: 0;
transition: all 0.3s;
}
div.topBotomBordersOut a:before
{
top: 6px;
transform: translateY(10px);
}
div.topBotomBordersOut a:after
{
bottom: 7px;
transform: translateY(-10px);
}
div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
{
opacity: 1;
transform: translateY(0px);
}