We Keep Coding

Having problems with resizing text

I've just started a project and so far I've added a header and text. I've gotten the header to resize correctly but I'm struggling to get the text and subtitle to do so.
I would like the text to resize smoothly but not sure how to go about doing this. I attempted using media queries but it's not really effective. Not really sure how to go about fixing this, any help will be greatly appreciated.
Codepen: https://codepen.io/Ayanfe/pen/oNoqoaR
HTML
<div class="container">
<div class="glitch" data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
<div class="glow">Ayanfe Sanusi</div>
<hr class="solid">
<p class="subtitle">ILLUSTRATOR & CODER</p>
</div>
<div class="scanlines"></div>
</div>
CSS
.container {
position: absolute;
transform: translate(-50%, -50%);
margin-top: 50%;
left: 50%;
width: 100%;
}
.glitch, .glow {
color: #dfbfbf;
position: absolute;
font-size: 12rem;
animation: glitch 5s 5s infinite;
font-family: "Oswald", sans-serif;
font-style: italic;
font-weight: 200px;
margin-top: -28.5%;
left: 6%;
width: 100%;
text-size-adjust: auto;
}
.glitch::before, .glow::before {
content: attr(data-text);
position: absolute;
left: 0;
text-shadow: -8px 0 magenta;
background: none;
overflow: hidden;
top: 0;
animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
.glitch::after, .glow::after {
content: attr(data-text);
position: absolute;
left: 0px;
text-shadow: -5px 0 lightgreen;
background: none;
overflow: hidden;
top: 0;
animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}
#keyframes glitch {
1% {
transform: rotateX(10deg) skewX(90deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
.scanlines {
overflow: hidden;
mix-blend-mode: difference;
}
}
.scanlines::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
animation: fudge 7s ease-in-out alternate infinite;
}
#keyframes fudge {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 2%);
}
}
.solid {
width: 50%;
position: relative;
color: rgba(165, 141, 141, 1);
opacity: 0.3;
margin-top: -12.5%;
left: 7%;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 1rem;
color: rgba(165, 141, 141, 1);
text-transform: uppercase;
letter-spacing: 1em;
position: relative;
margin-top: -0.6%;
right: -58%;
animation: glitch-2 5s 5.02s infinite;
}

rem is a static size for the font based on the html style for the font.
For example, if the html font size is set to 18px setting a fonts size for an element to 2rem will result in a font with 36px size (regardless of the page width).
In order to achieve what you want you should use vw which is setting the size based on the view width, setting the title to 10.35vw and the subtitle to 0.85vw should do the trick

GIF Example
HTML
<div class=nav>
<header>
[Ayanfe Sanusi]
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="container">
<div class="glitch" data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
<div class="sub-container">
<div class="solid"></div>
<p class="subtitle">ILLUSTRATOR & CODER</p>
</div>
<div class="scanlines"></div>
</div>
CSS
#font-face {
font-family: 'montsserat';
src: url(fonts/Montserrat-SemiBold.ttf);
font-weight: 100;
font-style: SemiBold;
}
#font-face {
font-family: 'montsseratR';
src: url(fonts/Montserrat-Regular.ttf);
font-weight: 100;
font-style: Regular;
}
#font-face {
font-family: 'montsseratM';
src: url(fonts/Montserrat-Medium.ttf);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: linear-gradient(to right, #0c0427, #0d0427, #0d0427, #0e0327, #0e0327, #11082f, #130c36, #160e3e, #1f1150, #2a1463, #371575, #451488);
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex;
min-height: 100vh;
overscroll-behavior: none;
-webkit-animation: fadeIn 2s;
animation: fadeIn 2s;
animation-delay: 0s;
overflow-x: hidden;
cursor: url(Cursors/3.png), auto;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
cursor: url(Cursors/3.png), auto;
}
.logo {
position: relative;
left: -50px;
letter-spacing: 1px;
cursor: url(Cursors/3.png), auto;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: 'Montserrat', sans-serif;
cursor: url(Cursors/3.png), auto;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
cursor: url(Cursors/3.png), auto;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: montsseratR;
font-size: 0.9rem;
text-transform: none;
cursor: url(Cursors/3.png), auto;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: montsseratR;
font-size: 0.9rem;
text-transform: none;
cursor: url(Cursors/3.png), auto;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
text-transform: none;
position: sticky;
opacity: 0.5;
text-transform: uppercase;
cursor: url(Cursors/3.png), auto;
}
header ul li a.active {
color: #fff;
opacity: 1;
font-family: 'Montserrat', sans-serif;
cursor: url(Cursors/3.png), auto;
}
header ul li a:hover {
color: #fff;
opacity: 1;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
text-transform: uppercase;
z-index: 20000;
cursor: url(Cursors/3.png), auto;
}
.container {
display: flex;
flex-direction: column;
margin-top: 15rem;
margin-left: 5%;
width: 100%;
margin-bottom: 5%;
}
.glitch {
color: #dfbfbf;
font-size: 9rem;
font-family: "Oswald", sans-serif;
font-style: italic;
text-shadow: -5px 0 lightgreen, -8px 0 magenta;
animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
margin-left: 2%;
}
#keyframes glitch {
1% {
transform: rotateX(10deg) skewX(90deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
.sub-container{
display: flex;
flex-direction: row;
}
.scanlines {
overflow: hidden;
mix-blend-mode: difference;
}
.scanlines::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(to bottom, transparent 0%,
rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
animation: fudge 7s ease-in-out alternate infinite;
}
#keyframes fudge {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 2%);
}
}
.solid {
width: 50%;
margin-top: 0.5rem;
height: 1.5px;
background-color: rgba(165, 141, 141, 1);
opacity: 0.3;
margin-left: 3%;
margin-right: 1.5%;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 1rem;
color: rgba(165, 141, 141, 1);
text-transform: uppercase;
letter-spacing: 1em;
right: -58%;
animation: glitch-2 5s 5.02s infinite;
}
#keyframes glitch-2 {
1% {
transform: rotateX(10deg) skewX(70deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}

How To Show A "Browser-Native" Dialog Box From A Web URL

When a user requests my URL, how can I show a dialog box to ask for login credentials first before showing anything, like this:
https://pasteboard.co/I9aeDzI.png
https://pasteboard.co/I9af5i7.png
Seems to me these dialog boxes are in-built or native to the browser. Also, when a user clicks on Submit, is it like an ordinary HTML tag?
It'll be good if someone can post links to relevant documentation on this feature, which I currently cannot seem to find with a simple Google search as I don't know what keywords appropriately describe it.
Like to learn more including:
How to get the webpage to show it ?
what happens behind the hood when someone clicks on Submit (eg. what HTTP request method it uses, which URL it will call) ?

Those are made with pure CSS and JavaScript.
You can't find anything like that because they aren't native browser features.
Maybe you see many websites using the same dialog box because they use templates and libraries built for that purpouse.
Take a look at this
var $btn = document.getElementById("submit");
var $form = document.getElementById("form")
function signIn() {
if ($form.checkValidity()) {
$btn.classList.add('pending');
window.setTimeout(function(){ $btn.classList.add('granted'); }, 1500);
}
}
$btn.addEventListener("click", signIn);
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i|Monoton");
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
box-sizing: border-box;
}
html {
font-size: 14px;
}
body {
background: linear-gradient(to bottom, #68d8d6, #ffffff);
color: #454749;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Source Sans Pro', sans-serif;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
font-family: Monoton, sans-serif;
margin-bottom: .5rem;
}
/**
* Tiles
*/
.tile {
background-color: #ffffff;
border-radius: .1rem;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
position: relative;
width: 100%;
min-width: 320px;
max-width: 24rem;
overflow: hidden;
}
.tile .tile-header {
background-image: url("https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_500,o_75,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg");
background-position: center;
background-size: cover;
height: 12rem;
}
.tile .tile-body {
padding: 2rem;
}
/**
* Forms
*/
.form-input {
display: block;
position: relative;
margin-bottom: 1rem;
}
.form-input > .material-icons {
position: absolute;
font-size: 1.5rem;
top: 1.2rem;
}
.form-input > .material-icons ~ input, .form-input > .material-icons ~ .label, .form-input > .material-icons ~ .underline {
margin-left: 2.25rem;
width: calc(100% - 2.25rem);
}
.form-input input {
border: none;
box-shadow: none;
padding-top: 1.5rem;
padding-right: 0;
padding-bottom: 0.5rem;
padding-left: 0;
outline-style: none;
width: 100%;
}
.form-input input ~ .label {
color: #868e96;
font-size: 1rem;
margin: 0;
pointer-events: none;
position: absolute;
top: 1.5rem;
left: 0;
transition: top .2s,font .2s;
z-index: 1;
}
.form-input input ~ .underline {
background-color: #bdc1c5;
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
}
.form-input input:hover ~ .underline, .form-input input:focus ~ .underline {
background-color: #07beb8;
}
.form-input input:hover ~ .label, .form-input input:focus ~ .label {
color: #07beb8;
}
.form-input input:focus ~ .underline {
height: 2px;
}
.form-input input:focus ~ .label, .form-input input:valid ~ .label {
top: 0;
font-size: 0.85rem;
}
.form-input input:-webkit-autofill ~ .label {
top: 0;
font-size: 0.85rem;
}
/**
* Buttons
*/
.btn {
border-radius: .2rem;
display: inline-block;
padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
}
.btn, [role="button"], [type="button"] {
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
}
.btn-irenic {
background-color: #07beb8;
color: white;
}
.btn-irenic:hover, .btn-irenic:focus, .btn-irenic:active {
background-color: #06a5a0;
}
.btn-serene {
background-color: #3dccc7;
color: white;
}
.btn-serene:hover, .btn-serene:focus, .btn-serene:active {
background-color: #32beb9;
}
.btn-tranquil {
background-color: #68d8d6;
color: white;
}
.btn-tranquil:hover, .btn-tranquil:focus, .btn-tranquil:active {
background-color: #54d3d0;
}
.btn-calm {
background-color: #9ceaef;
color: white;
}
.btn-calm:hover, .btn-calm:focus, .btn-calm:active {
background-color: #86e5eb;
}
.btn-cool {
background-color: #c4fff9;
color: white;
}
.btn-cool:hover, .btn-cool:focus, .btn-cool:active {
background-color: #abfff6;
}
.btn-ice {
background-color: #ffffff;
color: white;
}
.btn-ice:hover, .btn-ice:focus, .btn-ice:active {
background-color: #f2f2f2;
}
.btn-base {
background-color: #454749;
color: white;
}
.btn-base:hover, .btn-base:focus, .btn-base:active {
background-color: #393a3c;
}
/**
* Utilities
*/
.clearfix:after {
content: "";
display: table;
clear: both;
}
.float-right {
float: right;
}
/**
*
*/
.submit-container {
position: relative;
}
.submit-container #submit {
position: relative;
z-index: 2;
outline: none;
opacity: 1;
transition: transform .1s ease-in, opacity .1s ease-in, border-radius .1s ease-in;
right: -1px;
}
.submit-container #submit span {
opacity: 1;
transition: opacity .1s ease-in;
}
.submit-container #submit.pending {
transform: scale(0.55, 1.5);
background-color: #07beb8;
border-radius: 50%;
opacity: 1;
}
.submit-container #submit.pending span {
opacity: 0;
}
.submit-container #submit.pending ~ .login-pending {
opacity: 1;
transform: scale(1, 1);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending {
opacity: 1;
transform: translate(-9rem, -11rem) scale(18, 18);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending .spinner {
opacity: 0;
}
.submit-container #submit.granted ~ .login-pending .login-granted-content {
opacity: 1;
}
.submit-container .login-pending {
height: 3rem;
width: 3rem;
background-color: #07beb8;
position: absolute;
border-radius: 50%;
right: 1rem;
bottom: -0.5rem;
opacity: 0;
overflow: hidden;
transform: translate(0, 0) scale(0.5, 0.5);
transition: transform .2s ease-in, scale .2s ease-in;
z-index: 1;
}
.submit-container .login-pending .login-granted-content {
background-image: url(https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_700,o_25,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg);
background-position: center;
background-size: cover;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity .2s ease-in .2s;
text-shadow: 0px 0px 20px #ffffff;
}
.submit-container .login-pending .login-granted-content .material-icons {
font-size: 5px;
position: relative;
left: 1.25px;
}
.spinner {
width: 3rem;
height: 3rem;
position: relative;
margin: 0 auto;
}
.spinner .dot1, .spinner .dot2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #68d8d6;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: dot-bounce 2.0s infinite ease-in-out;
animation: dot-bounce 2.0s infinite ease-in-out;
}
.spinner .dot2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes dot-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
#keyframes dot-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: left;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="tile">
<div class="tile-header">
<h2 style="color: white; opacity: .75; font-size: 4rem; display: flex; justify-content: center; align-items: center; height: 100%;">SIGN IN</h2>
</div>
<div class="tile-body">
<form id="form">
<label class="form-input">
<i class="material-icons">person</i>
<input type="text" autofocus="true" required />
<span class="label">Username</span>
<span class="underline"></span>
</label>
<label class="form-input">
<i class="material-icons">lock</i>
<input type="password" required />
<span class="label">Password</span>
<div class="underline"></div>
</label>
<div class="submit-container clearfix" style="margin-top: 2rem;">
<div id="submit" role="button" type="button" class="btn btn-irenic float-right" tabindex="0">
<span>SIGN IN</span>
</div>
<div class="login-pending">
<div class=spinner>
<span class="dot1"></span>
<span class="dot2"></span>
</div>
<div class="login-granted-content">
<i class="material-icons">done</i>
</div>
</div>
</div>
</form>
</div>
</div>

More padding was added on logo jquery

I was trying to perfect my jQuery submenu but I stumble w/ some CSS issues.
Here are my questions:
How can I fix the issue when I re-open the navigation again it adds more padding on the bottom than it was opened for the first time?
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}

try this:
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 280px;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed .logo {
padding: 18px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
padding-bottom:0;
margin:0;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
/* height: 136px; */
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 50ms linear;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
transition: all 200ms linear;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
demo:

I modified the margins as some elements have some inncorrect margins and I made some modifications to the transitions as well, also I modified the navigation's width as it starts as 250px and become 280px after collapsing and expanding again.
just try this, hope it helps :)
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 250px;
}
.content.sidebar-collapsed .logo {
box-sizing: border-box;
transition: all 200ms;
overflow:auto;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
margin:0;
box-sizing: border-box;
}
.content.sidebar-collapsed #logo {
opacity: 0;
display:none;
transition: all 200ms;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
display:inline-block;
transition-delay:500ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 200ms;
}
.content.sidebar-collapsed-back #nav .fa-plus {
opacity: 0;
transition: all 200ms;
}
.content.sidebar-collapsed-back #nav .fa-plus {
opacity: 1;
transition-delay:500ms;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition:all 200ms;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
transition:all 200ms;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none;
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
height:34px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition:all 200ms;
}

Ensure that the height property of .logo is set to the same value when .content is both with and without the .sidebar-collapsed class.
The padding property of .logo is too large; there is barely any room left for the hamburger.
It seems you are only using padding to center the other menu icons. Consider another tactic - there are plenty of better ways to do it.
https://css-tricks.com/centering-css-complete-guide/#center-horizontally
http://howtocenterincss.com/

CSS Animation not working on IE11

I have a mouse over / mouse out animation on a couple of divs that is running great in Firefox and Chrome. However in IE it just won't work. Does anyone has any ideas why as this was working before?
var actual = 1;
var over = 0;
var over2 = 0;
function scrollleft() {
if (actual == 1) {
$("#vidstrip").animate({
left: "-1060"
});
actual = 2;
return;
}
if (actual == 2) {
$("#vidstrip").animate({
left: "0"
});
actual = 1;
return;
}
stopAllYT();
}
function scrollright() {
if (actual == 2) {
$("#vidstrip").animate({
left: "+0"
});
actual = 1;
return;
}
if (actual == 1) {
$("#vidstrip").animate({
left: "-1060"
});
actual = 2;
return;
}
stopAllYT();
}
$("#vidstop").on({
'mouseenter': function() {
overme();
}
});
$("#vidstop").on({
'mouseleave': function() {
outme();
}
});
//ARROWS OUT
function outme() {
if (over == 1) {
$(".leftnav").removeClass("lnavchange");
$(".rightnav").removeClass("lnavchange2");
$(".leftnav").toggleClass("lnavout");
$(".rightnav").toggleClass("lnavout2");
over = 0;
//alert(over);
//alert(over);
}
//alert('MouseOut');
// handle mouse event here!
}
//ARROWS IN
function overme() {
if (over == 0) {
//remove old class
$(".leftnav").removeClass("lnavout");
$(".rightnav").removeClass("lnavout2");
//add class
$(".leftnav").toggleClass("lnavchange");
$(".rightnav").toggleClass("lnavchange2");
over = 1;
//alert(over);
}
}
#subheader {
font-family: verdana;
text-align: center;
font-size: 28px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
#subcopy {
font-family: verdana;
text-align: center;
font-size: 14px;
font-weight: normal;
color: #000;
text-transform: capitalize;
}
#titlei {
font-family: verdana;
text-align: center;
font-size: 46px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
hr.undertitle {
background: #bfbfbf;
width: 150px;
border: 0;
height: 2px;
margin: 0 auto;
}
#subcopy {
line-height: 21px;
font-size: 14px;
text-align: center;
font-family: verdana;
}
#subhead {
line-height: 21px;
font-weight: bold;
font-size: 22px;
text-align: center;
font-family: verdana;
}
#Stage {
text-align: center;
width: 1060px;
margin-left: auto;
margin-right: auto;
}
#slidercontainer {
width: 1060px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
#vidspeephole {
width: 724px;
height: 407px;
overflow: hidden;
float: left;
margin-left: 4px;
}
#vidsholder {
width: 2896px;
height: 407px;
position: relative;
float: left;
}
.vids {
width: 724px;
height: 407px;
float: left;
overflow: hidden;
}
#rightpromos {
height: 407px;
width: 208px;
position: relative;
float: left;
margin-left: 8px;
}
#rightarrow {
height: 407px;
width: 54px;
position: relative;
float: left;
top: 50%;
bottom: 50%;
margin-left: 3px;
cursor: pointer;
}
#leftarrow {
height: 407px;
width: 54px;
position: relative;
float: left;
top: 50%;
bottom: 50%;
cursor: pointer;
}
.featuredpages {
width: 208px;
height: 133px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
.paging {
top: 10px;
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
width: 100px;
}
.pbutton {
float: left;
background: #F0F0F0;
cursor: pointer;
width: 15px;
height: 15px;
display: block;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
border-radius: 30px;
text-decoration: none !important;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
zoom: 1;
text-align: -webkit-match-parent;
list-style: none;
text-align: center;
}
.paging a.active {
background: #999 !important;
}
.paging a:hover {
background: #000 !important;
}
#row1 {
position: relative;
width: 1060px;
overflow: hidden;
height: 440px;
}
#row2 {
position: relative;
width: 1060px;
overflow: hidden;
height: 60px;
}
promocopy1 {
height: 31px;
padding: 5px;
color: #fff;
background-color: rgba(52, 52, 52, 0.85);
position: relative;
top: -41px;
font-family: Verdana, Geneva, sans-serif;
}
#stack {
height: 114px;
width: 1060px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.edgeLoad-EDGE-1207420 {
visibility: hidden;
}
#mainvidcontainer {
width: 1060px;
height: 698px;
overflow: hidden;
position: relative;
}
#vidstrip {
height: 626px;
width: 2120px;
position: relative;
}
#vidstop {
height: 626px;
width: 1060px;
position: relative;
overflow: hidden;
z-index: 0;
}
.thevids {
position: relative;
width: 1060px;
float: left;
height: 596px;
}
.vidscopy {
width: 1060px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
background-color: #999;
height: 30px;
text-align: center;
vertical-align: middle;
padding-top: 4px;
}
#navis {
z-index: 9;
width: 1060px;
height: 30px;
position: relative;
}
.leftnav {
position: absolute;
top: 300px;
left: -60px;
height: 54px;
width: 54px;
background-color: #666;
z-index: 1;
border: #FFF;
border: 1px;
cursor: pointer;
}
.rightnav {
position: absolute;
top: 300px;
right: -60px;
height: 54px;
width: 54px;
background-color: #666;
z-index: 1;
border: #FFF;
border: 1px;
cursor: pointer;
}
.pagingtop {
top: 8px;
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
width: 40px;
z-index: 2;
}
.pbuttontop {
margin-left: 50%;
margin-right: 50%;
text-align: center;
float: left;
background: #F0F0F0;
cursor: pointer;
width: 15px;
height: 15px;
display: block;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.35);
border-radius: 30px;
text-decoration: none !important;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
zoom: 1;
text-align: -webkit-match-parent;
list-style: none;
text-align: center;
}
.pagingtop a.active {
background: #999 !important;
}
.pagingtop a:hover {
background: #000 !important;
}
.lnavchange {
animation-name: example;
animation-duration: 0.3s;
animation-fill-mode: forwards;
-webkit-animation-name: example;
-webkit-animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
-ms-transform-origin: left: 100px;
}
#keyframes example {
0% {
left: -10px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
left: 22px;
opacity: 1;
}
}
.lnavchange2 {
animation-name: example2;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example2 {
0% {
right: -10px;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
right: 22px;
opacity: 1;
}
}
.lnavout {
animation-name: example3;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example3 {
0% {
left: 22px;
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
left: -80px;
opacity: 0;
}
}
.lnavout2 {
animation-name: example4;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes example4 {
0% {
right: 22px;
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
right: -80px;
opacity: 0;
}
}
<div id="mainvidcontainer">
<div id="vidstop">
<div class="leftnav" onclick="scrollleft()"></div>
<div class="rightnav" onclick="scrollright()"></div>
<div id="vidstrip">
<div class="thevids">
<iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/kf03Z7iiIk?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="vidscopy">Test Copy1</div>
</div>
<div class="thevids">
<iframe id="player" width="1060" height="596" src="https://www.youtube.com/embed/8a05WugVHFs?rel=0&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="vidscopy">Test Copy 2</div>
</div>
</div>
</div>
<div id="navis">
<div class="pagingtop">
<a class="pbuttontop" id="b1" onclick="anitop1(1)"></a>
<a class="pbuttontop" id="b2" onclick="anitop1(2)" style="margin-left:10px;"></a>
</div>
</div>
</div>
Edit: all good now it was just the youtube video that was being overlayed in Internet Explorer.
Thank you
Nuno

Got it!
It was the youtube video that was in front of the nav arrows.
In order to fix this for IE I had to add the wmode property to the youtube url:
wmode=opaque
Thank you all!
Hope this helps other people!

Codepen JQuery Code Doesn't Work In My Browser

I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.

try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});