skip to Main Content

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


  1. Try to put your js (script) code in footer.php in your theme (before </body>)

    Login or Signup to reply.
  2. 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.

    1. Install the plugin:
    2. Log in to your WordPress site.
    3. Go to Plugins > Add new
    4. Search for "Header and Footer Scripts".
    5. Click "Install Now" and activate the plugin.
    6. Custom JavaScript into WordPress

    Option #1.

    1. Upload a custom JavaScript file
    2. Save your custom JavaScript code into a file with the .js format
    3. Upload it into your site to this folder:

    wp-content/themes/your-theme/js/

    1. Go to Settings > Header and Footer Scripts.

    Now you have two options to load the file:

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search