We Keep Coding

Bootstraps issue

Excuse me. Is there any issues with Bootstraps when using CSS3 (I can't remove bootstraps because they're needed for my site). Here is the code:
<form onsubmit="submitFn(this, event);">
<div id="search-wrapper">
<div id="input-holder">
<input type="text" id="search-input" placeholder="Type to search" />
<button id="search-icon" onclick="searchToggle(this, event);"><span></span></button>
</div>
<span id="close" onclick="searchToggle(this, event);"></span>
<div id="result-container">
</div>
</div>
</form>
html,body {
height: 100%;
}
body {
padding: 0px;
margin:0px;
background-position: center;
background-size: cover; background-attachment: fixed;
background-repeat: no-repeat;
background-color: aqua;
}
#search-wrapper {
position: absolute;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top:50%;
left:50%;
}
#search-wrapper.active {}
#search-wrapper #input-holder {
overflow: hidden;
height: 70px;
background: rgba(255,255,255,0);
border-radius:6px;
position: relative;
width:70px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#search-wrapper.active #input-holder {
border-radius: 50px;
width:450px;
background: rgba(34, 215, 228, 0.5);
-webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
#search-wrapper #input-holder #search-input {
width:100%;
height: 50px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:none;
outline:none;
font-family:"Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color:#FFF;
-webkit-transform: translate(0, 60px);
-moz-transform: translate(0, 60px);
transform: translate(0, 60px);
-webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#search-wrapper.active #input-holder #search-input {
opacity: 1;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
transform: translate(0, 10px);
}
#search-wrapper #input-holder #search-icon {
width:70px;
height:70px;
border:none;
border-radius:6px;
background: #FFF;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#search-wrapper.active #input-holder #search-icon {
width: 50px;
height:50px;
margin: 10px;
border-radius: 30px;
}
#search-wrapper #input-holder #search-icon span {
width:22px !important;
height:22px !important;
display: inline-block !important;
vertical-align: middle !important;
position:relative !important;
-webkit-transform: rotate(45deg) !important;
-moz-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
-webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650) !important;
-moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650) !important;
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650) !important;
}
#search-wrapper.active #input-holder #search-icon span {
-webkit-transform: rotate(-45deg) !important;
-moz-transform: rotate(-45deg) !important;
transform: rotate(-45deg) !important;
}
#search-wrapper #input-holder #search-icon span::before, #search-wrapper #input-holder #search-icon span::after {
position: absolute !important;
content:'' !important;
}
#search-wrapper #input-holder #search-icon span::before {
width: 4px !important;
height: 11px !important;
left: 9px !important;
top: 18px !important;
border-radius: 2px !important;
background: aqua !important;
}
#search-wrapper #input-holder #search-icon span::after {
width: 14px !important;
height: 14px !important;
left: 0px !important;
top: 0px !important;
border-radius: 16px !important;
border: 4px solid aqua !important;
}
#search-wrapper #close {
position: absolute;
z-index: 1;
top:24px;
right:20px;
width:25px;
height:25px;
cursor: pointer;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
-moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#search-wrapper.active #close {
right:-50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#search-wrapper #close::before, #search-wrapper #close::after {
position:absolute;
content:'';
background: #FFF;
border-radius: 2px;
}
#search-wrapper #close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
#search-wrapper #close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
#search-wrapper #result-container {
width: 100%;
position: absolute;
top:80px;
left:0px;
text-align: center;
font-family: "Open Sans", Arial, Verdana;
font-size: 14px;
display:none;
color:#B7B7B7;
}
#media screen and (max-width: 560px) {
#search-wrapper.active #input-holder {width:200px;}
}
function searchToggle(obj, evt) {
const container = $(obj).closest('#search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
} else if (container.hasClass('active') && $(obj)
.closest('#input-holder').length == 0) {
container.removeClass('active');
// clear input
container.find('#search-input').val('');
// clear and hide result container when we press close
container.find('#result-container').fadeOut(100, function() {
$(this).empty();
});
}
}
function submitFn(obj, evt) {
value = $(obj).find('#search-input').val().trim();
_html = 'Searching for: ';
if (!value.length) {
_html = 'Ehem, I can\'t search nothing';
} else {
_html += '<b>' + value + '</b>';
}
$(obj).find('#result-container').html('<span>' + _html + '</span>');
$(obj).find('#result-container').fadeIn(100);
evt.preventDefault();
}
Here is a picture if I don't use bootstrap:
Dont't use bootstraps
And here is the picture if I use bootstrap:
enter image description here
I'm quite a newbie and I have learnt to code this on the internet. I appreciated your help.

I have figure out adding box-sizing: content-box !important; to every things have ::after, ::before help this

Change hamburger icon

I'm trying to change my hamburger icon to go to X. What i want to create is the top and bottom lines to go to the middle and then to go X. This is my code so far:
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
Left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg) ;
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.icon.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg) ;
transform: rotate(-45deg);
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>
I really appreciate it if anyone would help me. Since I've been stuck in this for so long, it have been three or four days now. and i don't know what else to do!!

How about rotating your other line -45 deg?
EDIT: updated per your request via comments. This now uses keyframes. We say at 0% of the total time do nothing, then at 50% of the total time (1second of 2 total) bring the top and bottom line together in the middle.
Then at 100% of total time(at 2seconds)rotate our lines to make a X. You could also look into chaining animations but i find it kind of unreliable. this solution, takes your work and splits it into what you want to happen The forwards will keep the last frame of the animation, giving you the X look rather than repeating the animation over and over.
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
Left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
animation: makeXLeft 2s forwards;
}
.icon.active .hamburger:after {
animation: makeXRight 2s forwards;
}
/* Standard syntax */
#keyframes makeXLeft {
0% {}
50% {top: 0px;transform: rotate(0deg);}
100% {top: 0px;transform: rotate(45deg);}
}
/* Standard syntax */
#keyframes makeXRight {
0% {}
50% {top: 0px;transform: rotate(0deg);}
100% {top: 0px;transform: rotate(-45deg);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>

Transition effect not working when added display attribute

Requirement is to put transition effect on redeem now button. Initially redeem now button is hidden, on hover it will display the redeem now button with transition
Problem is I have added display: none for redeem now button and on hover its showing display: block.
Below is my code
.wpf-demo-3 {
background-color: #FFF;
display: block;
width: 265px;
height: 300px;
overflow: hidden;
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align: center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
display: block !important;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
display: none !important;
}
<div class="col-xs-12 col-sm-3 col-md-3 text-center item-spacing" style=" margin: 0px; padding: 0px;" >
<div class="item hot-deals-wrapper clearfix item-spacingies " style="height: 300px;">
<div class="wpf-demo-3">
<h5> <strong><a style="color:#000;text-decoration:none" data-bind="text:name,attr:{href:redirectLink}"></a></strong> </h5>
<div data-bind="ifnot: mediumImage">
<div class="img-wrapper"> <a data-bind="attr:{href:redirectLink}"><img src="https://d2kbtrec8muwrn.cloudfront.net/assets/web/fnp/fnp/basket/B28.jpg"/></a> </div>
</div>
<div> <i class="fa fa-share-alt share-icon socialicons"></i>
<div style="display:none" class="alert_list"> </div>
</div>
<a href = "https://www.google.co.in/" class = "view-caption">
<button class="btn btn-default pb-bg-red bottommarginmore redeemNowBtn " style=" width: 128px; margin-top: 25px;">Redeem Now</button>
</a> </div>
</div>
</div>

You can try this instead of dispaly property
CSS CODE:
.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align:center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
opacity: 1;
visibility: visible;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
opacity: 0;
visibility: hidden;
}
DEMO:
https://jsfiddle.net/JentiDabhi/k5c6net2/

When switching from a display:none to a display:block with CSS transitions, try using a Javascript setTimeout with a small delay as an intermediary. The transitions can't apply to a display:none situation.
To do this you'd need to use a hover event, rather than a hover CSS selector.
In CSS, try changing .wpf-demo-3:hover .view-caption to just .view-caption.transition. Also, remove the display: block; and display:block !important; declarations.
Also, remove the display: none !important; from the .wpf-demo-3 .view-caption declaration.
Then in Javascript try something like (using jQuery syntax for example simplicity):
$('.wpf-demo-3').hover(function(){
$('.view-caption').show();
setTimeout(function(){
$('.view-caption').addClass('transition');
}, 10);
}, function(){
$('.view-caption').removeClass('transition');
setTimeout(function(){
$('.view-caption').hide();
}, 510);
});
The setTimeout in the last hover function is set to 510ms so that it is 10ms after the CSS transition timing of 0.5s.

Showing content by sliding left and up

I created a small box while slides to the left and then to the bottom to present the content after hovering the box: http://jsfiddle.net/7n9jxo9c/3/
Now I need to change it in a way, that the box slides to the left and the opens to the top. So the content should be placed above the X.
HTML:
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
Content
</div>
</div>
JS:
$(document).on('mouseenter', '.item', function( event ) {
var menue = $('#item_add');
var item = $(this);
menue.css({ "top": item.offset().top + 35 }).show();
});
CSS:
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
left: 5.5em;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
-webkit-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-moz-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-ms-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-o-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
}
#item_add:hover {
width: 7em;
left: .5em;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#item_add:hover .body {
max-height: 100px;
visibility: visible;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
#item_add .body {
max-height: 0;
overflow: hidden;
visibility: hidden;
-webkit-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-moz-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-ms-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-o-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
}
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}

use Bottom on #item_add:after instead of Top : http://jsfiddle.net/7n9jxo9c/9/
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
bottom: 5px;
right: -7px;
position: absolute;}

I am not sure if I fully understand your question, but I think you can use bottom attribute instead of top.
I mean something like this:
http://jsfiddle.net/7n9jxo9c/8/

Change css:hover effect to jquery.onclick()

I want to create a dropdown menu (for mobile: media queries are already working) but I want to change the :hover effect of my menu button (CSS) to jquery .onclick() function.
I know my code isn't far away of working but I am not beeing able to fix what's wrong.
Anyone could give me a tip?
Heres the Fiddle: http://jsfiddle.net/4G3gg/
HTML
<ul class="navigation">
<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>
<li class="n1">Home</li>
<li class="n2">Portfolio</li>
<li class="n3">Services</li>
<li class="n4">About</li>
<li class="n5">Contacts</li>
</ul>
CSS
#mobile:hover{background-color: rgba(255, 255, 255, 0.15);}
a{text-decoration: none;color: white; padding: 10px 50px; font-weight: bold}
a:hover { color: #777; font-weight: bold;}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 50px;
height: 40px;
margin: 0 auto;
position: relative;
z-index: 100;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 30px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
}
.navigation:hover a.main {
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.04);
}
.navigation li {
width: 200px;
height: 40px;
background: #131313;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #131313; }
.navigation li:nth-child(odd) { background: #1c1c1c; }
.navigation li.n1 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n2 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n3 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n4 {
-webkit-transition:0.1s linear 0.1s;
-o-transition:0.1s linear 0.1s;
transition:0.1s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.navigation:hover .n4 {
transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
JQUERY/JS
$(".navigation").addClass("js");
$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function(){
$(".navigation").toggle();
});

Instead of the pseudo selector .navigation:hover use a new class like .navigation.open in css, then use .toggleClass() to toggle the menu visibility in the click() handler
jQuery(function ($) {
//$(".navigation").addClass("js");
//$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function () {
$(".navigation").toggleClass('open');
});
})
Demo: Fiddle
Note: In your fiddle, you forgot to add jQuery library