How to get border overlapping?
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);
}
The overflow:hidden on the ul that is used for clearing the floats of the lis can be replaced by this:
.navbar > .main-nav > ul:after {
display: block;
clear: both;
content: '';
}
as overflow: hidden is preventing the overlapping of borders.
Now add some negative margin on li.active and adjust the border widths to the get the required effect.
I also wanted when on hover, the border transition would go above the green border line that's in the picture.
For this, change .navbar > .main-nav > ul > li:after and .navbar > .main-nav > ul > li:hover:after to the before psuedo element and throw in a margin-top to it.
See demo below:
/*** 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:after {
display: block;
clear: both;
content: '';
}
.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;
margin-top: -6px; /*ADDED THIS*/
}
.navbar > .main-nav > ul > li:before { /*CHANGED*/
display: block;
content: '';
border-top: solid 3px #a8a8b6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
margin-top: -9px; /*ADDED THIS*/
}
.navbar > .main-nav > ul > li:hover:before { /*CHANGED*/
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>