Title: Add Javascript to Nav Menu?
Last modified: August 21, 2016

---

# Add Javascript to Nav Menu?

 *  [mcography](https://wordpress.org/support/users/mcography/)
 * (@mcography)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/)
 * Is there a way to put javascript in the URL portion of a WordPress menu item?
   I have a live chat function on my site, and I am supposed to put this code onto
   the site to make a link to open the live chat (as suggested here).
 *     ```
       <!-- BEGIN OLARK CHAT LINK -->
       <a href="javascript:void(0);" onclick="olark('api.box.expand')">
           Click here to chat!
       </a>
       <!-- END OLARK CHAT LINK -->
       ```
   
 * The client wants the link in the utility nav bar, which was created used a WordPress
   menu in the WordPress dashboard. But when I copy and paste `javascript:void(0);"
   onclick="olark('api.box.expand')` into the URL box in the WordPress dashboard,
   it just disappears and the link remains inactive.
 * Any ideas on how to achieve this would be most welcome.

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Thread Starter [mcography](https://wordpress.org/support/users/mcography/)
 * (@mcography)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5079705)
 * I figured this out. In case anyone else is looking for the same thing, here’s
   the code that worked for me:
 *     ```
       // Live Chat Utility Link
       	add_filter( 'wp_nav_menu_items', 'live_chat_utility_link', 10, 2 );
       	function live_chat_utility_link ( $items, $args ) {
       	    if ( $args->theme_location == 'utility' ) {
       	        $items .= '<li><a href="javascript:void(0);" onclick="olark(\'api.box.expand\')" class="livechat">Live Chat</a></li>';
       	    }
       	    return $items;
       	}
       ```
   
 *  [playpianotoday](https://wordpress.org/support/users/playpianotoday/)
 * (@playpianotoday)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5080030)
 * Hello Mcography – Great post.
 * I’m trying to do exactly what you did w/olark.
 * I was able to add the code to the functions.php file, but I do not know what 
   exact code to add to the WP menu.
 * Can you help?
 * Thanks!
 *  Thread Starter [mcography](https://wordpress.org/support/users/mcography/)
 * (@mcography)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5080031)
 * Hi playpianotoday. I revised my approach a little bit so that it would be more
   in line with Javascript best practices. Here’s what you should do.
 * Create an item in your WordPress menu called ‘Live Chat’ or whatever you want
   it to be called. Direct the URL to ‘#’. Save the menu. Hover over the item and
   look at the little pop-up in the bottom left of your browser to find the ID of
   the menu item (or use Google Chrome dev tools). Note the ID.
 * Create a new javascript file called olark.js. Save it in your JS folder. Put 
   the following code in it (be sure to replace `#menu-item-38872` with the appropriate
   ID for the menu item you want to target).
 *     ```
       jQuery(document).ready(function($) {
       	$("#menu-item-38872").on("click", function(e){
       	      e.preventDefault();
       	      // olark code here
       	      olark('api.box.expand');
       	});
       });
       ```
   
 * Then, in functions.php, enqueue the olark.js file by including the following 
   code (be sure that the path to your olark.js file is correct).
 *     ```
       // Enqueue Olark Script
       	function olark_script() {
       		wp_register_script( 'olark', get_stylesheet_directory_uri() . '/js/olark.js', array(), '1.0.0', true );
       		wp_enqueue_script( 'olark' );
       	}
   
       	add_action( 'wp_enqueue_scripts', 'olark_script' );
       ```
   
 * That should do it. If you have any problems, let me know and I’ll try my best
   to help.
 *  [jrtoy](https://wordpress.org/support/users/jrtoy/)
 * (@jrtoy)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5080044)
 * Glad I found you guys here… OK here’s my issue that you may be able to fix very
   quickly. I’m using events calendar plugin by tri.be. Created a script:
 *     ```
       <script type="text/javascript">
       function showLocation(position) {
         window.location.href ="http://www.wcsaddict.com/events/?action=tribe_list&tribe_paged=1&tribe-bar-geoloc-lat="+ position.coords.latitude +"&tribe-bar-geoloc-lng="+ position.coords.longitude;
       }
   
       function errorHandler(err) {
         if(err.code == 1) {
           alert("Error: Access is denied!");
         }else if( err.code == 2) {
           alert("Error: Position is unavailable!");
         }
       }
       function getLocation(){
   
          if(navigator.geolocation){
             // timeout at 60000 milliseconds (60 seconds)
             var options = {timeout:60000};
             navigator.geolocation.getCurrentPosition(showLocation,
                                                      errorHandler,
                                                      options);
          }else{
             alert("Sorry, browser does not support geolocation!");
          }
       }
       </script>
       ```
   
 * it grabs a users location and places it in the url to display events nearby. 
   I created the menu area going to # (nowhere) and know the menu id, I don’t know
   how to make it all work, I tested the script by adding getLocation() at the end
   and it all worked great. How do I make my menu when I click “nearby” load this
   script?
 *  [Gabolozano83](https://wordpress.org/support/users/gabolozano83/)
 * (@gabolozano83)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5080071)
 * Hey mcography
 * Thank you for your post, it kind of make sense but is not working for me and 
   you might be able to help me out.
 * What I need to do is to add Google analytics event tracking to my menu items 
   so I can know if people actually click on them or not.
 * So what i did was creating the js file as you say but changed your on click event
   for my code so it looks like this.
 *     ```
       jQuery(document).ready(function($) {
       	$("#menu-item-211").on("click", function(e){
       	      e.preventDefault();
       	      // event tracking code here
       	      ga('send', 'event', 'category', 'action', 'label');
       	});
       });
       ```
   
 * I also changed the menu item Id.
 * Then I added the function to my function.php file and double checked that the
   path to the olark.js was correct
 * But this is not working!
 * What am i doing wrong? In theory, I should be able to see the onclick event on
   the menu item when I inspect the element.
 * Hope you can help,
 * Thank you
 *  Thread Starter [mcography](https://wordpress.org/support/users/mcography/)
 * (@mcography)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5080072)
 * [@gabolozano83](https://wordpress.org/support/users/gabolozano83/) You do not
   need to add the Google Analytics code directly to the menu items, so the solutions
   in this thread will not help you. Google Analytics already tracks clicks on your
   website. All you need to do is copy and paste the tracking code provided by Google
   Analytics into your functions.php file.
 * Check out [this article](http://www.wpbeginner.com/beginners-guide/how-to-install-google-analytics-in-wordpress/)
   or [this one](http://premium.wpmudev.org/blog/how-to-add-google-analytics-to-wordpress-in-under-60-seconds/)
   for more information.
 *  [NVme](https://wordpress.org/support/users/niranjannaulakha/)
 * (@niranjannaulakha)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5080077)
 * [@mcography](https://wordpress.org/support/users/mcography/) I wanted to install
   ajax code to the primary menu.
    The code is a shopping bag (fixed mini cart).
   how should I add this to the menu. The code is
 *     ```
       <div>
       <script type="text/javascript" src="http://app.ecwid.com/script.js?1378155"></script>
       <script type="text/javascript"> xMinicart("style=","layout=Mini");
       </script>
       </div>
       ```
   
 * also the item id of the menu is `menu-item-76`
 *  [analog boy](https://wordpress.org/support/users/analog-boy/)
 * (@analog-boy)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5080078)
 * Hi.
    I have the same problem as Niranjannaulakha
 * I’m trying to put a Fastspring shopping cart icon into the nav menu but I’m having
   problems with the script Fastspring sent to me.
 * The script they send me is:
 *     ```
       <script type="text/javascript" src="http://sites.fastspring.com/company-id/api/order.js"></script>
       <a href="http://sites.fastspring.com/company-id/order/contents"><img class="alignnone size-full wp-image-4093" src="http://www.companyname.com/wp-content/uploads/2015/07/shoppingcart-white.png" alt="shoppingcart-white" width="25" height="25" /></a> <span style="color: #ffffff;"> View Cart (
       <script type="text/javascript">
        document.write(FastSpringOrder.count);
       </script> ) </a>
       ```
   
 * I really don’t know what to do with this code…
    Any help would be much appreciated.
 * Thanks in advance

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Add Javascript to Nav Menu?’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [nav](https://wordpress.org/support/topic-tag/nav/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 6 participants
 * Last reply from: [analog boy](https://wordpress.org/support/users/analog-boy/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/add-javascript-to-nav-menu-1/#post-5080078)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics