Hi guys, I want to add one of these animated icons but I don’t know how.
Here are the icons: http://codepen.io/mblode/pen/evjfn/
Could you help me? Thanks!
Hi guys, I want to add one of these animated icons but I don’t know how.
Here are the icons: http://codepen.io/mblode/pen/evjfn/
Could you help me? Thanks!
Quick try (without digging deep into the code). Choose selected effect and copy & paste style from .css field in codepen to custom code before head-tag:
<style>
@mixin navToggle($left, $top) {
position: absolute;
width: 60px;
height: 120px;
top: $top;
left: $left;
transition-duration: 0.5s;
}
.navToggle1{
@include navToggle(0px, 60px);
.icon-left {
@include icon(8px, 30px);
&:before{
@include icon-before(8px, 30px, -20px);
}
&:after{
@include icon-after(8px, 30px, 20px);
}
&:hover{
cursor: pointer;
}
}
.icon-right {
@include icon(8px, 30px);
left: 30px;
&:before{
@include icon-before(8px, 30px, -20px);
}
&:after{
@include icon-after(8px, 30px, 20px);
}
&:hover{
cursor: pointer;
}
}
&.open {
.icon-left {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
}
&:after{
transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
}
}
.icon-right {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
}
&:after{
transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
}
}
}
}
</style>
Copy & paste this in custom code before body-tag:
<script src="http://codepen.io/assets/editor/live/css_live_reload_init.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
And this for the desired effect also before body-tag
Give the menu the desired class .navToggle1 in Webflow designer and it should work when you publish the site.