We Keep Coding

Html Transistion lag only for the first time after reload

This is a gif of issue : https://gifyu.com/image/DeGX
And my code: https://jsfiddle.net/Mrsheesh/dj1L3vhq/7
i am using xampp to host this page in locale
and even jsfiddle seems laggy.
I tried to remove the image, and it worked fine.
Is there a way to fix this, without remove the image?
My code:
console.log("msg.js Loaded");
function show_msg() {
document.querySelector(".box-msg").classList.add("active");
document.querySelector(".bg-msg").classList.add("active");
}
function hide_msg() {
document.querySelector(".box-msg").classList.remove("active");
document.querySelector(".bg-msg").classList.remove("active");
}
body {
margin: 0;
}
.bg-msg {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease;
}
.bg-msg.active {
visibility: visible;
opacity: 1;
}
.box-msg {
visibility: hidden;
position: fixed;
left: 50%;
top: 10%;
transform: translateX(-50%);
height: 0;
width: 0;
max-width: 550px;
border-radius: 20px;
background-color: white;
border: 1px solid rgb(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.box-msg.active {
visibility: visible;
opacity: 1;
height: 400px;
width: 50%;
}
.box-msg .box-head {
height: 20%;
width: 100%;
/* background-color: blue; */
}
/* ==================================Close Button================================= */
.box-msg .box-head .close {
position: absolute;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
}
.box-msg .box-head .close::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
/* use the hex value here... */
font-size: 30px;
color: #FFF;
line-height: 20px;
text-align: center;
}
/* ==================================Head IMG================================= */
.box-msg .box-head .background {
position: absolute;
width: 100%;
height: 20%;
overflow: hidden;
}
.background img {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 300%;
/* animation: 10s left_right forwards; */
}
#keyframes left_right {
from {
left: 0;
}
to {
left: 100%;
}
}
/* ==================================Head Title================================= */
.box-msg .box-head .title {
position: relative;
height: 100%;
margin-left: 25px;
margin-right: 25px;
color: white;
font-size: clamp(10px, 4vw, 35px);
/* line-height: 80px;
text-align: center; */
display: flex;
justify-content: center;
align-items: center;
font-family: BebasNeue-Regular;
letter-spacing: 0.1em;
}
/* ====================================MSG Body================================= */
.box-msg .box-body {
height: 80%;
width: 100%;
/* background-color: brown; */
}
/* ======================================BTN===================================== */
.btn {
cursor: pointer;
width: 100px;
height: 50px;
background: coral;
text-align: center;
line-height: 50px;
}
<div class="btn" onclick="show_msg()">Test</div>
<div class="bg-msg"></div>
<div class="box-msg">
<div class="box-head">
<div class="background">
<img src="./img/background/bg2.jpg" alt="">
</div>
<div class="close" onclick="hide_msg()">Close</div>
<div class="title">Title</div>
</div>
<div class="box-body">
<div class="body-text">Body Text</div>
</div>
</div>

how do I center the anchor tag inside a div whose parent is working as an overlay [duplicate]

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
what I want is to center the anchor tag texts vertically also I want the "contents" div to fit the screen so that if the screen gets smaller or bigger the anchor tag doesn't run off the margin creating overflow which I don't want, I tried a bunch of different ways to fix this but none seem to work, any help is appreciated! here's the code...
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
overflow: hidden;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can just add display: flex; and align-items: center; to the .menu-overlay.open identifier:
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can easily achieve this using flexbox:
Here's the CSS to achieve what you want:
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
color: white;
}

Is There an Alternative Method to Replace These Anchor Links? [duplicate]

This question already has an answer here:
Is There an Alternative Method to Mimic the Behavior of an Anchor Link/Target Pseudo-Class?
(1 answer)
Closed 5 years ago.
I have developed a lightbox feature, made with CSS for the most part. Though it functions well at a glance, I've been facing some complications with the way that it opens and closes with anchor links, the primary issue being that it adds on entries to the browser history.
Here's an example of what I am referring to:
I load a page with an image with the lightbox feature applied.
I click on the image, and the lightbox window opens.
Then I close the lightbox window and it returns back to the page; however, doing this has now added 2 additional history entries by opening and closing the lightbox via the anchor links behavior, (which append the page's URL with http://SITEURL.com/PAGEURL#theanchor).
Judging from previous responders, linking to anchors seem to be the least recommended for producing this sort of functionality. If that is the case, how else could I implement this, (and would I potentially be able to avoid the use of anchors altogether)?
Here is a full snippet that presents the lightbox feature in action, as well as the anchor link behavior:
$('.pic > img').click(function() {
var srcToCopy = $(this).attr('src');
$('body').find('.imgsrc').attr('src', srcToCopy);
$('body').addClass('no-scroll');
});
$('#customlightbox-controls').on('click', function() {
$('body').removeClass('no-scroll');
});
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
}
.pic,
#imgsrc {
display: inline-block;
}
img {
width: 100px
}
a {
display: inline-block;
line-height: 0;
}
.container {
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox:target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox:target img {
opacity: 1;
}
.customlightbox:target~#customlightbox-controls {
top: -3px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</a>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</a>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</a>
</div>
<!-- Lightbox Prompt -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
Hopefully there is some sort of referable solution.

I accidentally posted this answer but, you can remove anchor tags and and just add cursor: pointer; css to your .pic class.
$('.pic > img').click(function() {
var srcToCopy = $(this).attr('src');
$('body').find('.imgsrc').attr('src', srcToCopy);
$('body').addClass('no-scroll');
});
$('#customlightbox-controls').on('click', function() {
$('body').removeClass('no-scroll');
});
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 100px
}
a {
display: inline-block;
line-height: 0;
}
.container {
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox:target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox:target img {
opacity: 1;
}
.customlightbox:target~#customlightbox-controls {
top: -3px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Prompt -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>

You could just prevent the default action and not add the hash to the url (or history)
$('a[href^="#"]').click(function(evt){
evt.preventDefault()
});
Has been a long time since I have used Lightbox and not sure if this will conflict with it's features or not

Javascript dot navigation not working

I am quite new to coding and I am trying to implement a dot navigation bar. Below is my code.
<html>
<head>
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
/* Init */
html { width: 100%; height: 100%; }
body {
position: relative;
width: 100%; height: 100%;
background: #EA7E00;
}
.dot-nav {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* Fin Init */
.dot-nav--item {
position: relative;
display: block;
width: 16px; height: 16px;
margin-bottom: 28px;
border: 3px solid #fff;
border-radius: 50%;
&:before, &:after { content: ""; }
&:before {
position: absolute;
top: -1px; bottom: -1px; left: -1px; right: -1px;
transform: scale(0);
opacity: 0;
border-radius: 50%;
background-color: #fff;
transition: all .3s;
}
&:after {
display: block;
width: 3px; height: 30px;
margin: 13px auto 0;
background-color: #fff;
}
&:last-child:after { display:none; }
&:hover { cursor: pointer; }
&.is-active:before {
opacity: 1;
transform: scale(1);
}
}
.dot-nav--link {
position: absolute;
top: 50%;
visibility: hidden;
transform: translate(-120%, -50%);
width: 200px;
padding: 5px 10px;
opacity: 0;
color: #111; background-color: #fff;
transition: all .3s;
&:before {
content: "";
position: absolute;
top: 50%; left: 100%;
width: 0; height: 0;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #fff;
border-style: solid;
transform: translateY(-50%);
}
.dot-nav--item:hover & {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
}
</style>
<script type="text/javascript">
$('.dot-nav--item').on('click', function(){
$this = $(this),
$siblings = $this.siblings();
$this.addClass('is-active');
$siblings.removeClass('is-active');
})
</script>
</head>
<body><nav class="dot-nav">
<ul class="dot-nav--list list-unstyled">
<li class="dot-nav--item is-active">Lorem ipsum dolor.</li>
<li class="dot-nav--item">Assumenda, officia omnis.</li>
<li class="dot-nav--item">Sed, alias totam.</li>
<li class="dot-nav--item">Officia, itaque, vitae!</li>
<li class="dot-nav--item">Repellendus, veritatis, deserunt.</li>
</ul>
</nav>
</body>
</html>
The dots do not seem to be showing content when I hover over it and does not fill when I click on it either. I can't seem to find what is wrong. I suspect it has something to do with the script source but I am not so sure. Do you have any suggestions?

You have added the visible styles in a wrong place. Look at the following syntax
.dot-nav--item:hover & {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
The above style you have added under the class .dot-nav--link. This is wrong. It should be like below and you have to place after the .dot-nav--links declarations.
.dot-nav--item:hover .dot-nav--link {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
So whenever you hover the items it will try to find the child with the class .dot-nav--link and make it visible. Not sure what you are trying to achieve through jquery code.
FIDDLE DEMO

To modify a searchbox with extra css/jQuery options

I am creating a search box query, with the following css animations, which is displayed in the snippet. It works like I need it to, but I just want to add two more things to it, to make it work for me.
How do I make the hit area of the search icon, expand the entire width of the header to make it more intuitive? At the moment, the hit area is fixed to the size ratio of the search icon.
I would also like to know, how do I display the search icon to the left of the placeholder text after it has been clicked?
Hope this makes sense
$('.header').on('click', '.search-toggle', function(e) {
var selector = $(this).data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
font-family: 'Roboto', sans-serif;
}
.header {
max-width: 250px;
margin: 2em auto 10em;
}
.header-nav {
position: relative;
padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}
.menu {
display: inline-block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu span {
display: inline-block;
}
.menu .text {
color: #0097bf;
display: block;
padding: 10px;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.search-button {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
/* search icon */
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before,
.search-toggle::after {
content: '';
position: absolute;
display: block;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #0097bf;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #0097bf;
top: 10px;
left: 8px;
transform: rotate(45deg);
}
/* x icon */
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}
#header-2 {
overflow: hidden;
}
#header-2 .menu span {
opacity: 1;
transition: transform 0.3s, opacity 0.2s 0.1s;
}
#header-2 .menu span .text:nth-child(1) {
transition-delay: 0.4s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
transform: translateX(20%);
opacity: 0;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
#header-2.show .menu span {
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
transform: translateX(0);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
<nav class="header-nav">
<div class="search-button">
</div>
<p class="menu">
<span><span class="text">Search</span></span>
</p>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>

this is how you can make full header 'clickable' to start search.
I placed the icon to the left where your left padding was, see if demo is what you need
$('.header:not(.show)').on('click', '.header-nav', function(e) {
var selector = $(this).find('.search-toggle').data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
font-family: 'Roboto', sans-serif;
}
.header {
max-width: 250px;
margin: 2em auto 10em;
}
.header-nav {
position: relative;
padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}
.menu {
display: inline-block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu span {
display: inline-block;
}
.menu .text {
color: #0097bf;
display: block;
padding: 10px;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.search-button {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
.header.show .search-button{
left: .3em; transition: all 500ms;
}
/* search icon */
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before,
.search-toggle::after {
content: '';
position: absolute;
display: block;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #0097bf;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #0097bf;
top: 10px;
left: 8px;
transform: rotate(45deg);
}
/* x icon */
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}
#header-2 {
overflow: hidden;
}
#header-2 .menu span {
opacity: 1;
transition: transform 0.3s, opacity 0.2s 0.1s;
}
#header-2 .menu span .text:nth-child(1) {
transition-delay: 0.4s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
transform: translateX(20%);
opacity: 0;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
#header-2.show .menu span {
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
transform: translateX(0);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
<nav class="header-nav">
<div class="search-button">
</div>
<p class="menu">
<span><span class="text">Search</span></span>
</p>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>