We Keep Coding

I wonder why i can't add picture to the .img class (through the css) and why the sign up button wont change to sign in when i click it [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I follow this youtube tutorial (https://www.youtube.com/watch?v=sy9OI-ndKnc). I don't understand HTML, CSS, and JS that much (to be honest i had no experience in it), but I really need this page to work. I think the .img-btn span.m-in should be the one responsible to translate the button when it get clicked(?).
document.querySelector('.img-btn').addEventListener('click', function()
{
document.querySelector('.cont').classList.toggle('s-signup')
}
);
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700;800&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
*, *:before, *:after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.heading li,a,button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10%;
background-color: #000000;
}
.heading .logo{
cursor: pointer;
height: 80px;
width: 80px;
transition: all 0.3s ease 0s;
-webkit-transition: image 0.2s ease-in-out;
transition: image 0.2s ease-in-out;
}
.navigation{
list-style: none;
}
.navigation li{
display: inline-block;
padding: 0px 20px;
}
.navigation li a{
transition: all 0.3s ease 0s;
}
.navigation li a:hover{
color: #0088a9;
}
.heading button{
padding: 9px 25px;
background-color: rgb(224, 173, 19);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.heading button:hover{
background-color: rgba(0,136,168,0.8);
}
.joinus{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: -webkit-linear-gradient(left, #000000, #FF0000);
font-family: 'Nunito', sans-serif;
}
.joinus input, button{
border: none;
outline: none;
background: none;
}
.cont{
overflow: hidden;
position: relative;
width: 900px;
height: 550px;
background: #fff;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.form{
position: relative;
width: 640px;
height: 100%;
padding: 50px 30px;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.joinus h2{
width: 100%;
font-size: 30px;
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus label{
display: block;
width: 260px;
margin: 25px auto;
text-align: center;
}
.joinus label span{
font-size: 14px;
font-weight: 600;
color: #505f75;
text-transform: uppercase;
font-family: 'Nunito', sans-serif;
}
.joinus input{
display: block;
width: 100%;
margin-top: 5px;
font-size: 16px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(109, 93, 93, 0.4);
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus button{
display: block;
margin: 0 auto;
width: 260px;
height: 36px;
border-radius: 50px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.submit{
margin-top: 40px;
margin-bottom: 30px;
text-transform: uppercase;
font-weight: 600;
font-family: 'Nunito', sans-serif;
background-color: rgb(224, 173, 19);
}
.submit:hover{
background-color: rgba(0,136,168,0.8);
}
.forgot-pass{
margin-top: 15px;
text-align: center;
font-size: 14px;
font-weight: 600px;
color: #0c0101;
cursor: pointer;
}
.forgot-pass:hover{
color: rgba(0,136,168,0.8);
}
.social-media{
width: 100%;
text-align: center;
margin-top: 20px;
}
.social-media ul{
list-style: none;
}
.social-media ul li{
display: inline-block;
cursor: pointer;
margin: 25px 15px;
}
.social-media img{
width: 40px;
height: 40px;
}
.sub-cont{
overflow: hidden;
position: absolute;
left: 640px;
top: 0;
width: 900px;
height: 100%;
padding-left: 260px;
background: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
}
.cont.s-signup .sub-cont{
-webkit-transform: translate3d(-640px, 0, 0);
transform: translate3d(-640px, 0, 0);
}
.img{
overflow: hidden;
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-image: url(img/alex.jpg);
background-size: cover;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
}
.cont .s-signup .img:before{
-webkit-transform: translate3d(640px, 0, 0);
transform: translate3d(640px, 0, 0);
}
.img-text{
z-index: 2;
position: absolute;
left: 0;
top: 50px;
width: 100%;
padding: 0 20px;
text-align: center;
color: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img-text h2{
margin-bottom: 10px;
font-weight: normal;
}
.img-text p{
font-size: 14px;
line-height: 1.5;
}
.cont.s-signup .img-text.m-up{
-webkit-transform: translateX(520px);
transform: translateX(520px);
}
.img-text.m-in{
-webkit-transform: translateX(-520px);
transform: translateX(-520px);
}
.cont.s-signup .img-text.m-in{
-webkit-transform:translateX(0);
transform:translateX(0);
}
.sign-in{
padding-top: 65px;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.cont.s-signup .sign-in{
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 1.2s;
transition-duration: 1.2s;
-webkit-transform: translate3d(640px, 0 , 0);
transform: translate3d(640px, 0 , 0);
}
.img-btn{
overflow: hidden;
z-index: 2;
position: relative;
width: 100px;
height: 36px;
margin: 0 auto;
background: transparent;
color: #fff;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
}
.img-btn:after{
content: '';
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 50px;
}
.img-btn span{
position: absolute;
left: 0;
top: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.2s;
transition: -webkit-transform 1.2s;
transition: transform 1.2s;
transition: transform 1.2s, -webkit-transform 1.2s;
}
.img-btn span.m-in{
-webkit-transform: translateY(-72px);
transform: translateY(-72px);
}
.sign-up{
-webkit-transform: translate3d(-900px, 0 ,0);
transform: translate3d(-900px, 0, 0);
}
.cont.s-signup .sign-up{
-webkit-transform: translate3d(0, 0 ,0);
transform: translate3d(0, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join us</title>
<link rel="stylesheet" type="text/css" href="style/joinus.css">
</head>
<body>
<section class="heading">
<header>
<img class="logo" src="img/logo_csc.png" alt="logo">
<nav>
<ul class="navigation">
<li>Home</li>
<li>About us</li>
<li>Research</li>
<li>Our Achievement</li>
</ul>
</nav>
<div>
<button>Join us</button>
</div>
</header>
</section>
<section class="joinus">
<div class="cont">
<div class="form sign-in">
<h2>Sign In</h2>
<label>
<span>Email Address</span>
<input type="email" name="email">
</label>
<label>
<span>Password</span>
<input type="password" name="password">
</label>
<button class="submit" type="button">Sign In</button>
<p class="forgot-pass">Forgot Password?</p>
<div class="social-media">
<ul>
<li><img src="img/instagram.png"></li>
<li><img src="img/youtube.png"></li>
</ul>
</div>
</div>
<div class="sub-cont">
<div class="img">
<div class="img-text m-up">
<h2>New activist?</h2>
<p>Sign up here!</p>
</div>
<div class="img-text m-in">
<h2>Already an activist?</h2>
<p>If you already has an account, sign in here!.</p>
</div>
<div class="img-btn">
<span class="m-up">Sign Up</span>
<span class="m-in">Sign In</span>
</div>
</div>
<div class="form sign-up">
<h2>Sign Up</h2>
<label>
<input type="text" placeholder="Full Name...">
</label>
<label>
<input type="email" placeholder="Email...">
</label>
<label>
<input type="text" placeholder="Majors...">
</label>
<label>
<input type="password" placeholder="Password...">
</label>
<label>
<input type="password" placeholder="Confirm Password...">
</label>
<button type="button" class="submit">Sign Up Now</button>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="script/register.js"></script>
</body>
</html>

Working Codepen https://codepen.io/thisisloop/pen/xxwadPp
I had to add these two codes to the CSS File:
.cont.s-signup .img-btn span.m-in{
-webkit-transform: translateY(0);
transform: translateY(0);
}
.cont.s-signup .img-btn span.m-up{
-webkit-transform: translateY(72px);
transform: translateY(72px);
}
For the image, you need to add quotation marks
instead of:
background-image: url(img/alex.jpg);
do
background-image: url('img/alex.jpg');
I couldnt add it to the codepen, because codepen doesnt allow file upload for free users.

Having an issue with a JS Hamburger Menu

Added a Hamburger Menu to our site. There are no console log errors and the menu refuses to expand.
The page in question - https://www.harpercollege.edu/foundation/alumni-dev/index.php
The Code Pen I'm working from - https://codepen.io/anon/pen/vQNmgx
Everything works fine in codepen and visually it looks fine in the live site. I just can click or expand. The goal is to be able to expand the menu and push over the rest of the page.
{HTML}
<body>
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<li class="block">Home</li>
<li class="block">Profile</li>
<li class="block">Blogs</li>
<li class="block">Following</li>
<li class="block">Settings</li>
<li class="block">Logout</li>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<p class="hello-text">hello</p>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
</body>
{JS}
$(".hamburger").on("click", function(){
$(".hamburger").toggleClass("is-active");
$('body').toggleClass('menu-active');
$(".side-nav").toggleClass("hidden");
if($("#side").hasClass("is-active")){
$("#main").toggleClass("hidden");
} else if(!$("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
}
});
{CSS}
html,body{
padding: 0;
margin: 0;
height: 100%;
background-color: black;
box-sizing: border-box;
}
button:focus {outline:0;}
a{
color: #fff;
}
a:hover{
color: #fff;
text-decoration: none;
}
.side-nav{
position: absolute;
background-color: gray;
width: 300px;
height: 100%;
z-index: 1;
right: 0;
}
.open-menu-side{
position: relative;
display: block;
height: 80px;
width: 100%;
text-align: center;
float: right;
}
.side-nav-ul{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
list-style: none;
font-size: 28px;
color: #fff;
}
.block{
height: 40px;
}
header{
height: 80px;
background-color: #fff;
}
.brand{
display: inline-block;
}
.img-menu img{
height: 50px;
width: 50px;
border-radius: 50%;
border: solid 1px black;
float: left;
}
.hidden{
position: absolute;
right: -300px;
}
#pushed{
position: relative;
}
#main{
float: right;
}
.hamburger {
padding: 15px 15px;
height: 100%;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative; }
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hello-text{
text-align: right;
color: #fff;
font-size: 22px;
}
body.menu-active{
padding-right: 300px;
}

You've put the script which adds the click handler in your document's head. At the point that the script is loaded, $('.hamburger') doesn't exist in the DOM, so the click handler is not added, therefore the clicks have no effect.
To fix, consider moving the script to the bottom of the page, or wrapping it in $(document).ready().

Hamburger menu + shrinking header

I was advised to repost my question, as I did not phrase it correctly previously.
I have a hamburger menu (see here: http://codepen.io/Dingerzat/pen/zKXARr ), that I want to work with a shrinking header (see here: http://codepen.io/Nickies/pen/ZYwJZM ). Putting the two codes directly together hasn't worked. The shrinking header and resizing logo ceases to function on scrolling.
I am not sure what is causing this. Any advice would be brilliant.
Posting the code my combined version below:
HTML
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="text">MENU</div>
</div>
</div>
</header><!-- /header -->
<nav>
<ul role="navigation" class="overlay hidden">
<li>WORK</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="contacts">
<address>someperson#somewhere.com</address>
</div>
<div class="bigtext">THIS IS PLACEHOLDER</div>
CSS
#import "compass/css3";
$bar-width: 50px;
$bar-height: 4px;
$bar-spacing: 15px;
body {
background: #000000;
font-family: Teko;
color: #ffffff;
}
.hamburger-menu {
position: fixed;
z-index: 1;
top: 45px;
left: 45px;
margin: auto;
width: $bar-width;
height: $bar-height + $bar-spacing*2;
cursor: pointer;
}
.text {
margin-left: 60px;
font-size: 18px;
letter-spacing: .05em;
color: #ffffff;
-webkit-transform: translateX(0);
transition: all 350ms ease-in-out;
vertical-align: middle;
position: relative;
z-index: 1;
}
.show .text {
opacity: 0;
transform: translateX( -10px );
}
.bar,
.bar:after,
.bar:before {
width: $bar-width;
height: $bar-height;
}
.bar {
position: relative;
z-index: 1;
transform: translateY($bar-spacing);
background: rgba(188, 49, 254, 1);
transition: all 0ms 300ms;
.show & {
background: rgba(255, 255, 255, 0);
}
}
.bar:before {
content: "";
position: fixed;
z-index: 1;
left: 0;
bottom: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: fixed;
z-index: 1;
left: 0;
top: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.show .bar:after {
top: 0;
transform: rotate(45deg);
background: rgba(0, 0, 0, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.show .bar:before {
bottom: 0;
transform: rotate(-45deg);
background: rgba(0, 0, 0, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.overlay {
position: fixed;
border-style: solid;
border-width: 1em;
border-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #333;
background-color: #bc31fe;
}
nav ul, li {
margin: 0;
padding: 0;
font-family: Teko;
font-weight: bold;
font-size: 0.8em;
list-style: none;
text-align: center;
}
nav ul {
position: fixed;
top: 50%;
text-align: center;
&.hidden {
display: none;
}
a {
#include transition-duration(0.5s);
text-decoration: none;
color: white;
font-size: 3em;
line-height: 1.5;
}
}
nav ul li {
display: inline;
margin: 0 0.5rem;
}
.overlay .contacts {
position: fixed;
bottom: 37px;
left: 0;
right: 0;
padding-bottom: 15px;
text-align: center;
letter-spacing: .01em;
z-index: 2;
}
.contacts {
font-size: 16px;
line-height: 1.5;
color: #10131a;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.bigtext {
font-size: 50em;
}
header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
-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: center;
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: #9fdbfc;
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;
}
#media all and (max-width: 660px) {
header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
}
header nav a {
line-height: 50px;
margin: 0 10px;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
header.smaller nav {
height: 35px;
}
header.smaller nav a {
line-height: 35px;
}
}
JS
( function () {
var $navUL = $( 'nav ul' );
$( '.hamburger-menu' ).on( 'click', function () {
$( this ).toggleClass( 'show' );
$navUL.toggleClass( 'hidden' );
} );
} )();
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();

Hamburger menu with shrinking header

I want to merge a menu I have been working on with a shrinking header (though i want the hamburger to stay the same size).
I have tried directly merging piece of I found of a shrinking header with my hamburger menu, though there are conflicts where the overlay goes behind the header. Also can't get the logo text to be central, or get the bar itself to resize.
Here is my attempt: http://codepen.io/Dingerzat/pen/XjQQWZ
And here is the previous and working version of the menu: http://codepen.io/Dingerzat/pen/zKXARr
Any help would be great.
HTML
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="text">MENU</div>
</div>
</div>
</header><!-- /header -->
<nav>
<ul role="navigation" class="overlay hidden">
<li>WORK</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="contacts">
<address>someperson#somewhere.com</address>
</div>
<div class="bigtext">THIS IS PLACEHOLDER</div>
CSS
#import "compass/css3";
$bar-width: 50px;
$bar-height: 4px;
$bar-spacing: 15px;
body {
background: #000000;
font-family: Teko;
color: #ffffff;
}
.hamburger-menu {
position: fixed;
z-index: 1;
top: 45px;
left: 45px;
margin: auto;
width: $bar-width;
height: $bar-height + $bar-spacing*2;
cursor: pointer;
}
.text {
margin-left: 60px;
font-size: 18px;
letter-spacing: .05em;
color: #ffffff;
-webkit-transform: translateX(0);
transition: all 350ms ease-in-out;
vertical-align: middle;
position: relative;
z-index: 1;
}
.show .text {
opacity: 0;
transform: translateX( -10px );
}
.bar,
.bar:after,
.bar:before {
width: $bar-width;
height: $bar-height;
}
.bar {
position: relative;
z-index: 1;
transform: translateY($bar-spacing);
background: rgba(188, 49, 254, 1);
transition: all 0ms 300ms;
.show & {
background: rgba(255, 255, 255, 0);
}
}
.bar:before {
content: "";
position: fixed;
z-index: 1;
left: 0;
bottom: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: fixed;
z-index: 1;
left: 0;
top: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.show .bar:after {
top: 0;
transform: rotate(45deg);
background: rgba(0, 0, 0, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.show .bar:before {
bottom: 0;
transform: rotate(-45deg);
background: rgba(0, 0, 0, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.overlay {
position: fixed;
border-style: solid;
border-width: 1em;
border-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #333;
background-color: #bc31fe;
}
nav ul, li {
margin: 0;
padding: 0;
font-family: Teko;
font-weight: bold;
font-size: 0.8em;
list-style: none;
text-align: center;
}
nav ul {
position: fixed;
top: 50%;
text-align: center;
&.hidden {
display: none;
}
a {
#include transition-duration(0.5s);
text-decoration: none;
color: white;
font-size: 3em;
line-height: 1.5;
}
}
nav ul li {
display: inline;
margin: 0 0.5rem;
}
.overlay .contacts {
position: fixed;
bottom: 37px;
left: 0;
right: 0;
padding-bottom: 15px;
text-align: center;
letter-spacing: .01em;
z-index: 2;
}
.contacts {
font-size: 16px;
line-height: 1.5;
color: #10131a;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.bigtext {
font-size: 50em;
}
header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
-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: center;
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: #9fdbfc;
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;
}
#media all and (max-width: 660px) {
header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
}
header nav a {
line-height: 50px;
margin: 0 10px;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
header.smaller nav {
height: 35px;
}
header.smaller nav a {
line-height: 35px;
}
}
JS
( function () {
var $navUL = $( 'nav ul' );
$( '.hamburger-menu' ).on( 'click', function () {
$( this ).toggleClass( 'show' );
$navUL.toggleClass( 'hidden' );
} );
} )();
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();

Creating a moving bar (inside the nav bar) which moves to the element the user hovers on?

I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:

You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/

Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.

In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.