Develop Reference

Trying with no success to include js scripts in header

trying to include this JS script in my wordpress header:
$(function() {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// Second script - Hover effect on active link
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
$('.hvr-underline-from-center').append('<span class="add-icon"> <i class="fas fa-long-arrow-alt-left"></i></span>');
$('.hvr-underline-from-center').hover(
function() {
$( this ).find('.add-icon').css('opacity','1');
}, function() {
$(this).find('.add-icon').css('opacity','0');
}
);
with no success :(
in this page: https://studiorayz.com/?page_id=50 you are supposed to see the effect.
the script add some hover effect and apply a small arrow to the left of the links.
after googling it I think it's related to the language, like wp is using php and I am not using the script correctly.
please help me I am a complete newb! thanks in advance!
BTW u can see the whole effect here at this codepen:
https://codepen.io/coolzikri/pen/BEbpzO

On WordPress jQuery is run in compatibility mode so you can't use the dollar sign ($) directly like you would in any other non-WordPress project. If you check your browser's console, you'll notice this error message:
TypeError: $ is not a function
Try this instead:
jQuery(function($) {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// Second script - Hover effect on active link
jQuery(function($) {
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
$('.hvr-underline-from-center').append('<span class="add-icon"><i class="fas fa-long-arrow-alt-left"></i></span>');
$('.hvr-underline-from-center').hover(
function() {
$( this ).find('.add-icon').css('opacity','1');
}, function() {
$(this).find('.add-icon').css('opacity','0');
}
);
});
By the way, you don't really need jQuery for this. You can achieve an almost identical effect using CSS only:
/* General */
#nr-1:hover + .bg-1,
#nr-2:hover + .bg-2 {
opacity: 1;
}
.flexboxcenter {
display: flex;
direction: rtl;
float: right;
justify-content: right;
align-items: right;
}
.section-1 {
width: 100%;
height: 100vh;
display: block;
position: relative;
}
.hover-link {
height: 100px;
width: 100%;
z-index: 100000;
}
.hover-link .nav-1 {
z-index: 10000;
}
.svc-title {
direction: rtl;
position: relative;
font-size: 20px;
font-family: 'Heebo', serif;
float: right;
right: 20px;
top: 20px;
opacity: 1;
color: #a2a3a7;
z-index: 100001;
padding-bottom: 30px;
}
.add-icon {
vertical-align: middle;
font-size: 20px;
direction: rtl;
color: #000;
transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
-ms-transition: color 0.25s ease-in-out 0s;
}
.hover-link .nav-1 a {
right: 20px;
top: 50px;
text-align: right;
display: block;
font-family: 'Heebo', serif;
text-decoration: none;
color: black;
font-size: 30px;
letter-spacing: 0.7px;
padding: 0px;
transition: all 500ms ease-in-out;
}
.hover-link .nav-1:hover a {
opacity: 0.4;
}
.hover-link .nav-1 a::after {
display: inline-block;
opacity: 0;
margin: 0 0.25em;
content: "\f30a";
font-family: "Font Awesome 5 Free";
font-size: 0.8em;
font-weight: 900;
transition: opacity 0.5s ease;
}
.hover-link .nav-1 a:hover {
color: black !important;
opacity: 1 !important;
transform: translate(-20px) !important;
}
.hover-link .nav-1 a:hover::after {
opacity: 1;
}
/* Background classes */
.bg-1 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.bg-2 {
position: absolute;
top: 0px;
left: 0px;
background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
background-size: cover;
height: 200vh;
width: 100%;
z-index: -1;
opacity: 0.0;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<span class="svc-title"> השירותים שאנו מציעים:
</span>
<section id="section-1">
<div class="hover-link flexboxcenter">
<div class="nav-1">
הדמיות אדריכליות
<div class="bg-1"></div>
<br>
הדמיות פנים
<div class="bg-2"></div>
<br>
הדמיות חוץ
<div class="bg-2"></div>
</div>
</div>
</section>

How can I add hamburger to my website's mobile view

I have to add a hamburger for mobile view of my website coding.
I tried with the help of w3 school but it's not working fine.
I will share my html and css code. I have added a hamburger icon just have to make it active.
Should I write code in separate JavaScript file or add any code here in my HTML?
I have tried adding hamburger from HTML CSS properties
HTML and CSS for the mobile view header:
.mobheader {
width: 80%;
height: auto;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.hamburger {
font-size: 33px;
color: white;
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
<div class="mobheader">
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="logo">
<h1>
<img src="img/logomob.png" alt="logo">
</h1>
</div>
<div class="dots">
<i class="fas fa-search"></i>
</div>
</div>
I want this hamburger to work in such a way it shows 3 menus on click

I can't comment, I'm not understanding what's your problem because the code you already posted works, I just changed the color and the size in the code snippet. See and if your problem is other's just clarify what's your current problem.
EDIT
I find a codepen and added to the snippet to show you what you wanted.
Source: https://codepen.io/mranenko/pen/wevamj
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
doToggle: function(e) {
e.preventDefault();
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
}
};
hamburger.navToggle.addEventListener('click', function(e) {
hamburger.doToggle(e);
});
}());
/* imports */
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
/* colors */
/* variables */
/* mixins */
/* resets and base styles */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*:focus {
outline: none;
}
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif;
}
body {
background: none;
color: inherit;
font: inherit;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
a:hover {
opacity: 0.8;
}
/* nav toggle */
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2;
}
.nav-toggle:hover {
opacity: 0.8;
}
.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%;
}
.nav-toggle .nav-toggle-bar {
margin-top: 0;
}
.nav-toggle .nav-toggle-bar::after {
margin-top: 0.8rem;
}
.nav-toggle .nav-toggle-bar::before {
margin-top: -0.8rem;
}
.nav-toggle.expanded .nav-toggle-bar {
background: transparent;
}
.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before {
background: white;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* nav */
.nav {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1;
}
.nav.expanded {
left: 0;
}
.nav ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
<ul>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>

Assuming the hamburger is an image:
<img src="img/hamburger.png" alt="hamburger"/>
You don't need the h1 tags for images, those are for headings (i.e text)
Also remember the "/" to close your img tags; your logo doesn't have one.

HTML/CSS/Javascript: Open/Close Menu when Clicking Button

I've got a hamburger icon for my page that should open/close a dropdown menu when clicked on. I pulled the code for the hamburger icon from Jonathan Suh's github page and am trying to implement a open/close dropdown menu with it (here's the page for your reference https://github.com/jonsuh/hamburgers).
The problem is that when I click on it, the dropdown menu will appear, but when I click on it again it won't disappear. I've tried a few things, such as setting a boolean variable to false and making it true when clicked on, but the code doesn't execute the way I imagine it would. Here's the Code:
//declarations
var hamburger = document.querySelector(".hamburger");
function dropDown() {
document.querySelector(".dropdown-content").style.display = "block";
}
hamburger.addEventListener("click", function() {
hamburger.classList.toggle("is-active");
dropDown();
});
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
/*!
* Hamburgers
* #description Tasty CSS-animated hamburgers
* #author Jonathan Suh #jonsuh
* #site https://jonsuh.com/hamburgers
* #link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
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;
}
/*
* Spring
*/
.hamburger--spring .hamburger-inner {
top: 2px;
transition: background-color 0s 0.13s linear;
}
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.22s;
background-color: transparent;
}
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg);
}
<div class="dropDown">
<button onclick="dropDown()" class="hamburger hamburger--spring" type="button">
<span class = "hamburger-box">
<span class="hamburger-inner"></span>
</span>
<div id="myDropDown" class="dropdown-content">
Home
Work
Resume
Life
</div>
</button>
</div>
While I know there is probably a solution you can use in jQuery, I have no experience with that. So please, keep it in JavaScript. I am completely new to it, but have a basic understanding of how it works.

No need for dropDown() or any additional JS for that matter. Your current click event handler will do just fine. Just add a descendant selector in your CSS that targets dropdown-content when .hamburger also has the class of .is-active (which is already being handled through your class toggle):
.hamburger.is-active .dropdown-content {
display: block;
}

Try this:
function dropDown() {
var dropDown = document.querySelector(".dropdown-content");
if (dropDown.style.display === 'block') {
dropDown.style.display = "none";
} else {
dropDown.style.display = 'block'
}
}

Try to do some css like the one in my website
I use the code to monitor the attribute. You can use JS to change the attribute of the dropdown-content element.
So, put the following into your CSS
.dropdown-content[show='true']{
position: absolute;
margin-top: 50px;
display: block;
}
Then change your JavaScript function to this:
function dropDown(){
var drop=document.getElementById("myDropdown");
if(drop.getAttribute("show")=="true"){
drop.setAttribute("show","false");
}else{
drop.setAttribute("show","true");
}
}
For security, I suggest you to add show="false" to your dropdown-content element. You can also refer my website code to understand them more.

Javascript onclick function doesnt execute (error log - not defined)

I can't get this for the life of me...
I've tried to make a mobile friendly nav that gets hidden if the screen res is less than 600px and a button appears that toggles the menu opacity.
https://jsfiddle.net/ef3mezk5/
Here is the fiddle... I have defined the function at the onclick as simply as possible -
<div class="menu-icon-black" id="menu-icon" onclick="menudrop()">
i am using a separate file that holds the JS engine code here is the portion that is responsible for the menu drop
function menudrop() {
document.getElementById("menu-icon").classList.toggle("change");
document.getElementById("navlist").classList.toggle("show");
}
Uncaught ReferenceError: menudrop is not defined
at HTMLDivElement.onclick ((index):169)
And i can see its clearly defined... what is going on here?
Can someone please look into this and tell me whats wrong?

Seems like you have chosen improper load type at jsfiddle. Instead of load type - on load use no wrap - in body.
Credits to #Pointy.
function menudrop() {
document.getElementById("menu-icon").classList.toggle("change");
document.getElementById("navlist").classList.toggle("show");
}
#media screen and (max-width: 600px) {
.navlist {
background-color: white;
border: 1px solid black;
right: 15%;
opacity: 0;
z-index: 99;
}
.navlist li {
border: none;
font-size: 25px;
float: none;
}
#menu-icon {
display: inline-block;
}
}
.navlist {
width: auto;
margin: 0px;
padding: 0px;
margin-right: 5%;
-webkit-padding-start: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
font-family: "Roboto", sans-serif;
display: inline-block;
position: relative;
}
.navlist li {
float: left;
font-size: 14px;
padding: 10px 15px;
border-right: 1px solid black;
list-style: none;
text-decoration: none;
position: relative;
}
.navlist a {
color: black;
text-decoration: none;
transition: color 0.3s;
/* vendorless fallback */
-o-transition: color 0.3s;
/* opera */
-ms-transition: color 0.3s;
/* IE 10 */
-moz-transition: color 0.3s;
/* Firefox */
-webkit-transition: color 0.3s;
/*safari and chrome */
position: relative;
}
.navlist a:hover {
color: #00bff3;
position: relative;
}
.menu-icon-black {
display: inline-block;
cursor: pointer;
}
.menu-icon-bar1,
.menu-icon-bar2,
.menu-icon-bar3 {
width: 45px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .menu-icon-bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
transform: rotate(-45deg) translate(-9px, 7px);
}
/* Fade out the second bar */
.change .menu-icon-bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .menu-icon-bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.show {
opacity: 1 !important;
}
<ul class="navlist" id="navlist">
<li>Начало</li>
<li>Планограма</li>
<li>Запитване</li>
<li>Реклама при нас</li>
</ul>
<div class="menu-icon-black" id="menu-icon" onclick="menudrop()">
<div class="menu-icon-bar1"></div>
<div class="menu-icon-bar2"></div>
<div class="menu-icon-bar3"></div>
</div>

I'm trying to put a CSS&Javascript button to do the job of another label&input checkbox?

Essentially, I'm trying to combine two online tutorials:
1st is from the good folks here http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ which gives me a button that creates a drop down menu that displays hides with css display attribute, which I have working:
<!-- Load Drop down menu #maxwidth 760px -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<!-- END Drop down menu -->
I have this working, hiding and showing my
<ul id="menu">
but I want the below menu button to do the same job. The second is from a great tut for a menu icon that changes to a cross and back again with css and javascript:
http://callmenick.com/post/animating-css-only-hamburger-menu-icons
<div class="o-grid__item">
<button class="c-hamburger c-hamburger--htx" >
<span>Toggle</span>
</button>
</div>
I tried putting on inside the other, but it seemed to lose the functionality… Any help much appreciated.
– – -
OK the full markup is:
<!-- Load Drop down menu #maxwidth 760px -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<!-- END Drop down menu -->
<!-- START Hamburger Icon -->
<div class="o-grid__item">
<button class="c-hamburger c-hamburger--htx" >
<span>Toggle</span>
</button>
</div>
<!-- END Hamburger Icon -->
<!-- END Button for menu below when below CSS Mediaquery -->
<ul id="menu">
<li><a class="item1" href="/item1.html">item1</a></li>
<li><a class="item2" href="/item2.html">item2</a></li>
<li><a class="item3" href="/item3.html">item3</a></li>
</ul>
The second part also has the following Javascript:
<script>
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
</script>
and the following is the css used for the css checkbox:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: inline-block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
right: 0px;
line-height: 1.2em;
padding-right: 20px
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
text-align: right;
line-height: normal;
background-color: rgba(0, 0, 0, 0.0);
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
padding-right: 0px;
position: absolute;
display: block;
right: 0px;
top: 10px;
}
}
and the following is the css used for the css/javascript button animation:
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 32px;
left: 30px;
right: 30px;
height: 4px;
background: white;
border-radius: 1px;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;
content: "";
border-radius: 1px;
}
.c-hamburger span::before {
top: -10px;
}
.c-hamburger span::after {
bottom: -10px;
}
.c-hamburger--htx {
background-color: transparent;
}
.c-hamburger--htx span {
-webkit-transition: background 0s 0.3s;
transition: background 0s 0.3s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0s;
transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.c-hamburger--htx span::after {
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background-color:;
}
.c-hamburger--htx.is-active span {
background: none;
}
.c-hamburger--htx.is-active span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
-webkit-transition-delay: 0s, 0.3s;
transition-delay: 0s, 0.3s;
}