I am fixing bugs in WordPress first time. I have a menu when it is the mobile version of cite it creating into the burger menu and is hidden at the right of the screen because has opacity: 0 and transform: translate(100%,0). I create a simply js function that must create style opacity: 1 and transform: 0, but I don’t know where I need to put this function. Help me please!!!
This image have onClick Event:
<span id="myBtn" class="btn-menu js-menu"><i></i></span>
Here is my js function:
<script type="text/javascript">
document.getElementById("myBtn").addEventListener("click", function() {
document.getElementById("lestOfItem").style.opacity = 1;
document.getElementById("lestOfItem").style.transform = "inherit";
document.getElementById("lestOfItem").style.width = "100%";
document.getElementById("lestOfItem").style.textAlign = "center";
});
</script>
Menu which must be opened when i click into the image:
<ul id="lestOfItem" class="">
---items---
</ul>
2
Answers
Try to put your js (script) code in footer.php in your theme (before
</body>
)This should get you in the right direction: [Add Custom JavaScript into your WordPress Site][1]
Source: https://www.ostraining.com/blog/wordpress/custom-js/
In some situations, you may need to add custom JavaScript to your site. Normally, this would involve modifying your theme files.
However, there is a less intrusive alternative. "Header and Footer Scripts" is a plugin to add custom JavaScript to WordPress without modifying your theme.
Option #1.
Now you have two options to load the file:
Scripts in header (load inside head tag)
Scripts in footer (load before closing body tag)
Use the location that match better your needs using this syntax as example:
<
script src="http://www.yoursite.any/wp-content/themes/your-theme/js/file.js" >
< /script>