Schro Schro - 14 days ago 7
CSS Question

Line-height causing sliding url effect to break

I have a sliding underline url effect (shown here: http://codepen.io/Dingerzat/pen/XNgKmR) and when I combine it with a resizing header the later causes the former to not work. After deleting various sections I discovered that the culprit was the line-height in the "header nav" class within the resizing header CSS, but I need this in the code for the resizing header links to adjust when I scroll.

Is there a way to get these two pieces of code to play ball together?

My combined attempt: http://codepen.io/Dingerzat/pen/bBRejp

/* CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline; }

body {
line-height: 1; }

h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal; }

ol, ul {
list-style: none; }

blockquote {
quotes: none; }

blockquote:before, blockquote:after {
content: '';
content: none; }

del {
text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0; }

a img {
border: none; }

/* =Scss Variables
-------------------------------------------------------------- */
/* =Global
-------------------------------------------------------------- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

body {
background-color: #3cb5f9;
color: #505050;
font-family: "Ubuntu", sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.8; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
font-weight: 300; }

a {
text-decoration: none;
color: #3cb5f9; }

a:hover {
color: #0793e2; }

/* =Template
-------------------------------------------------------------- */
#wrapper {
width: 100%;
margin: 0 auto; }

#main {
background-color: #ffffff;
padding-top: 150px; }

.container {
width: 80%;
margin: 0 auto;
padding: 0 30px; }

.containertwo {
width: 86%;
margin: 0 auto;
padding: 0 30px; }
.containertwo h3 {
font-size: 30px;
text-align: center;
}

section {
padding: 60px 0; }
section h1 {
font-weight: 700;
margin-bottom: 10px; }
section p {
margin-bottom: 30px; }
section p:last-child {
margin-bottom: 0; }
section.color {
background-color: #d51c84;
color: white; }

/* =Info Bar
-------------------------------------------------------------- */
#info-bar {
background-color: #000000; }
#info-bar a {
color: white;
font-size: 14px;
text-transform: uppercase;
display: inline-block;
margin: 0;
padding: 10px; }
#info-bar a:hover {
background-color: #0793e2; }
#info-bar span.all-tutorials,
#info-bar span.back-to-tutorial {
display: block;
width: 50%; }
#info-bar span.all-tutorials {
float: left;
text-align: left; }
#info-bar span.back-to-tutorial {
float: right;
text-align: right; }
/* Styles go here */

/* Sliding URL */

.sliding-u-l-r-l {
display: inline-block;
text-decoration:none;
color: #ffffff;
position: relative;
padding-bottom: 3px;
}
.sliding-u-l-r-l:before {
background: #d41a82;
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0.4s ease;
}
.sliding-u-l-r-l:after {
background: #82da16;
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0.2s ease;
transition-delay: 0.2s;
z-index: -1;
}
.sliding-u-l-r-l:hover:before {
width: 100%;
transition: width .5s ease;
}
.sliding-u-l-r-l:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
/* =Header
-------------------------------------------------------------- */
#logo img {height: 40%;}

header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #000000;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s; }
header h1#logo {
display: inline-block;
height: 150px;
line-height: 150px;
float: left;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
header nav {
display: inline-block;
float: right; }
header nav a {
line-height: 150px;
margin-left: 20px;
color: #ffffff;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
header nav a:hover {
color: white; }
header.smaller {
height: 75px; }
header.smaller h1#logo {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px; }
header.smaller nav a {
line-height: 75px; }


.

<!-- HTML -->

<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="" />
<title>Header Resize On Scroll with Animations</title>

<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />

<!-- js -->
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
</head>



<body>

<div id="wrapper">

<header>
<div class="container clearfix">
<h1 id="logo">
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/bilendi-logo-trans.png">
</h1>
<nav>
<a class=sliding-u-l-r-l href="">Lorem</a>
<a class=sliding-u-l-r-l href="">Ipsum</a>
<a class=sliding-u-l-r-l href="">Dolor</a>
</nav>
</div>
</header><!-- /header -->
<div id="main">
<div id="content">
<main class="content" role="main">


</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Cupcakes for the people!</h1>
</div>
</section>
<section class="color">
<div class="container">
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section>
<div class="container">
<h1>Sugar rush, oh my...</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section>
</section>
</main></div>
</div><!-- #main -->





</div><!-- /#wrapper -->

</body>
</html>

Answer

The cause of your problem is when you use line-height it makes all element inside to have a vertical spacing so those effects are outside of the header and since you are using overflow: hidden; they can't be shown.

you can resolve this by adding top: 90px; .sliding-u-l-r-l:after and .sliding-u-l-r-l:before

or you can replace line-height with margin-top in header nav a