Menu
I'm trying to achieve having header's border top to have one color, and when on hover/active on the navigation, a portion of it would change to the other color.
As well as, why is it that for my li:hover tag, when I do border-top it still returns me border-bottom?
What I'm trying to achieve in a picture
As said previously, I also wanted when on hover, the border transition would go above the green border line that's in the picture.
How can I achieve this?
Here's what I have so far
/*** Page ***/
html,body {
margin: 0;
}
/*** Navigation ***/
.navbar {
background-color: #ecf0f1;
}
.navbar > .main-nav > ul,
li {
list-style-type: none;
text-decoration: none;
}
.navbar > .main-nav > ul {
min-height: 60px;
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
border-top: 8px solid #d1d064;
}
.navbar > .main-nav > ul > li {
text-align: center;
min-width: 150px;
position: relative;
top: -2px;
display: block;
float: left;
}
.navbar > .main-nav > ul > li a {
display: block;
color: #737373;
text-align: center;
padding: 20px 16px;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 800;
}
.navbar > .main-nav > ul > li.active {
border-top: 8px solid #0F9E5E;
}
.navbar > .main-nav > ul > li:after {
display: block;
content: '';
border-top: solid 3px #a8a8b6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.navbar > .main-nav > ul > li:hover:after {
transform: scaleX(1);
}
.navbar > .main-nav {
max-width: 1480px;
margin: 0 auto;
}<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br><br>
<nav class="navbar">
<div class="main-nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
</nav>
</body>Thanks
435
asked Dec 18 '16 04:12
Borders affect layout, I would recommend simply switching to box-shadow to change the color:
.navbar > .main-nav > ul > li.active,
.navbar > .main-nav > ul > li:hover {
box-shadow: 0 -8px 0 #0F9E5E;
}
Working demo:
.navbar {
background-color: #ecf0f1;
}
.navbar::after {
content: '';
clear: both;
display: block;
}
.navbar > .main-nav > ul,
li {
list-style-type: none;
text-decoration: none;
}
.navbar > .main-nav > ul {
margin: 0;
padding: 0;
box-sizing: border-box;
border-top: 8px solid #d1d064;
}
.navbar > .main-nav > ul > li {
text-align: center;
min-width: 150px;
position: relative;
display: block;
float: left;
}
.navbar > .main-nav > ul > li a {
display: block;
color: #737373;
text-align: center;
padding: 20px 16px;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 800;
}
.navbar > .main-nav > ul > li.active,
.navbar > .main-nav > ul > li:hover {
box-shadow: 0 -8px 0 #0F9E5E;
}<br>
<br>
<br>
<nav class="navbar">
<div class="main-nav">
<ul>
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Second</a>
</li>
<li><a href="#">Third</a>
</li>
</ul>
</div>
</nav>As well as, why is it that for my li:hover tag, when I do border-top it still returns me border-bottom?
This is caused by the following CSS:
.navbar > .main-nav > ul > li:after {
display: block;
content: '';
border-top: solid 3px #a8a8b6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.navbar > .main-nav > ul > li:hover::after {
transform: scaleX(1);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
