Title: include js menu
Last modified: January 19, 2018

---

# include js menu

 *  Resolved [mrpress01](https://wordpress.org/support/users/mrpress01/)
 * (@mrpress01)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/)
 * I’m trying to implement a responsive menu to the starter theme Underscores. I’ve
   tried two days but I can not understand where I’m wrong. For the scripts I relied
   on the website that provides jqueryscript.net script. where I tried, in addition
   to the one mentioned, to implement this
    [https://www.jqueryscript.net/menu/Mobile-friendly-Multi-level-Dropdown-Menu-Plugin-jQuery-Stellarnav.html](https://www.jqueryscript.net/menu/Mobile-friendly-Multi-level-Dropdown-Menu-Plugin-jQuery-Stellarnav.html)
   I registered the style and the script through the appropriate functions
 *     ```
       wp_enqueue_style('styles', get_template_directory_uri() . '/ ');
       ```
   
 * And
 *     ```
       wp_enqueue_script( scritp', get_template_directory_uri() . '/js/scritp');
       ```
   
 * then I assigned the appropriate ID and classes to the menu with
 *     ```
       <?php wp_nav_menu( array(
       'theme_location'  	=> 'primary',
       'menu_id'      		 => 'primary-menu',
       'container'		  =>  'div',
       'container_class'	  => 'stellarnav',
       'container_id'	 	  => 'main-nav',) );?>
       ```
   
 * I tried to implement the instructions either by calling the file (a.js) with 
   inside:
 *     ```
       jQuery( document ).ready( function( $ ) {
       $('#main-nav').stellarNav({
       // adds default color to nav. (light, dark)
       theme     : 'dark',
       // number in pixels to determine when the nav should turn mobile friendly
       breakpoint: 768,
       // adds a click-to-call phone link to the top of menu - i.e.: "18009084500"
       phoneBtn: false,
       // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/"
       locationBtn: false,
       // makes nav sticky on scroll
       sticky     : false,
       // 'static' or 'top' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page
       position: 'static',
       // shows dropdown arrows next to the items that have sub menus
       showArrows: true,
       // adds a close button to the end of nav
       closeBtn     : false,
       // fixes horizontal scrollbar issue on very long navs
       scrollbarFix: false
       });
       ```
   
 * in function.php with the string wp_enqueue_script and is directly from the header
   enclosed in the tags
    `<script type = "text / javascript"> </ script>` But without
   getting results, I was wrong somewhere?
 * sorry for my google english translator
 * Thanks so much
    -  This topic was modified 8 years, 4 months ago by [mrpress01](https://wordpress.org/support/users/mrpress01/).

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/include-js-menu/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/include-js-menu/page/2/?output_format=md)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9881352)
 * You need to show us the Webpage that has this menu.
 *  Thread Starter [mrpress01](https://wordpress.org/support/users/mrpress01/)
 * (@mrpress01)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9881361)
 * I’m developing a theme in local with underscores. it is not online
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9881423)
 * Try emulating the relevant Webpage through a sandbox tool like CCSDesk.com:
    1. View your webpage;
    2. Right click on the page somewhere and press “View source
    3. A new window will appear with all the code of your page. Copy all of that code
    4. Go to CSSDesk.com and paste it into the “HTML” section
    5. Press the “Share” button in CSSDesk
    6. A new URL will appear to the left of the “Share” button, copy that URL and paste
       it here in this thread
 * We can then hopefully see your webpage without it going live.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9881454)
 * On a side note, did you add a ‘modlook’ tag to this topic? If so, can you let
   me know what you need moderator attention for?
 *  Thread Starter [mrpress01](https://wordpress.org/support/users/mrpress01/)
 * (@mrpress01)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9881510)
 * because the post I had added was banned for the link I had entered
 * I immediately follow your guide and put the link
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9881567)
 * Oh right thanks for letting us know, but in this case it was just caught by the
   forum’s spam filter. We review the filter often and it’s already on our radar,
   so if this happens again there’s no need to tag the topic.
 * > I immediately follow your guide and put the link
 * Could you put that link here in this thread?
 *  Thread Starter [mrpress01](https://wordpress.org/support/users/mrpress01/)
 * (@mrpress01)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9881789)
 * if I go to this link [https://ccsdesk.com/](https://ccsdesk.com/) I am asked 
   to enter username and password. can you give me the link to upload my page to
   share?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9881848)
 * Damn I failed at typing, sorry. I meant this website instead: [https://cssdesk.com/](https://cssdesk.com/)
 *  Thread Starter [mrpress01](https://wordpress.org/support/users/mrpress01/)
 * (@mrpress01)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9882114)
 * this site does not work. maybe you can help me anyway. my problem is to implement
   this jquery plugin ([https://www.jqueryscript.net/menu/Mobile-friendly-Multi-level-Dropdown-Menu-Plugin-jQuery-Stellarnav.html](https://www.jqueryscript.net/menu/Mobile-friendly-Multi-level-Dropdown-Menu-Plugin-jQuery-Stellarnav.html))
   in Underscores starter theme. How would you do? so then I follow your steps and
   I understand where I was wrong. thank you so much
    -  This reply was modified 8 years, 4 months ago by [mrpress01](https://wordpress.org/support/users/mrpress01/).
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9882136)
 * I’m afraid I don’t have that much time and that’s the case for most people who
   help out here. I strongly encourage you to spend time emulating the problem, 
   so we spend less time trying to extract information from you and more time fixing
   the problem.
 *  Thread Starter [mrpress01](https://wordpress.org/support/users/mrpress01/)
 * (@mrpress01)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9882175)
 * I did not want to be rude, maybe I was misunderstood. I do not pretend you do
   the job for me. my problem is that I can not implement a jquery plugin. I think
   the procedure is the same for other plugins too. if the site works I share the
   source code of the page. Sorry again
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9882607)
 * Did you call wp_enqueue_script() from within a callback added to “wp_enqueue_scripts”
   action? This is what everyone should do. If you have script tags in the head 
   section with no code or file reference within, something has gone wrong somewhere
   with the enqueuing process. Also check your browser console for errors when you
   have problems like this.
 *  Thread Starter [mrpress01](https://wordpress.org/support/users/mrpress01/)
 * (@mrpress01)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9882815)
 * [@bcworkz](https://wordpress.org/support/users/bcworkz/)
    For the tests I inserted
   them in the wordpess hook (only for now)
 *     ```
       function consultweb_scripts() {
       	wp_enqueue_style( 'consultweb-style', get_stylesheet_uri() );
       	wp_enqueue_style('styles', get_template_directory_uri() . '/inc/style.css');
       	wp_enqueue_style('stellarnav.min', get_template_directory_uri() . '/js/stellarnav.min.css');
       	wp_enqueue_style('consultweb-grid', get_template_directory_uri() . '/inc/grid.css');
       	wp_enqueue_script ( 'stellarnav', get_template_directory_uri() . '/js/stellarnav.js');
       	wp_enqueue_script ( 'myscript', get_template_directory_uri() . '/js/myscript.js');
       }
       add_action( 'wp_enqueue_scripts', 'consultweb_scripts' );
       ```
   
 * The scripts (js and css) are loaded correctly in the header. As shown below
 *     ```
       </style>
       <link rel="stylesheet" id="consultweb-style-css" href="http://localhost/consultweb/wp-content/themes/consultweb/style.css?ver=4.9.2" type="text/css" media="all">
       <link rel="stylesheet" id="styles-css" href="http://localhost/consultweb/wp-content/themes/consultweb/inc/style.css?ver=4.9.2" type="text/css" media="all">
       <link rel="stylesheet" id="stellarnav.min-css" href="http://localhost/consultweb/wp-content/themes/consultweb/js/stellarnav.min.css?ver=4.9.2" type="text/css" media="all">
       <link rel="stylesheet" id="consultweb-grid-css" href="http://localhost/consultweb/wp-content/themes/consultweb/inc/grid.css?ver=4.9.2" type="text/css" media="all">
       <script type="text/javascript" src="http://localhost/consultweb/wp-content/themes/consultweb/js/stellarnav.js?ver=4.9.2"></script>
       <script type="text/javascript" src="http://localhost/consultweb/wp-content/themes/consultweb/js/myscript.js?ver=4.9.2"></script>
       <link rel="https://api.w.org/" href="http://localhost/consultweb/wp-json/">
       <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/consultweb/xmlrpc.php?rsd">
       <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/consultweb/wp-includes/wlwmanifest.xml"> 
       <meta name="generator" content="WordPress 4.9.2">
       <link rel="canonical" href="http://localhost/consultweb/pagina-di-esempio/">
       <link rel="shortlink" href="http://localhost/consultweb/?p=2">
       <link rel="alternate" type="application/json+oembed" href="http://localhost/consultweb/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fconsultweb%2Fpagina-di-esempio%2F">
       <link rel="alternate" type="text/xml+oembed" href="http://localhost/consultweb/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fconsultweb%2Fpagina-di-esempio%2F&format=xml">
       <link rel="pingback" href="http://localhost/consultweb/xmlrpc.php">		<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
       </head> 
       ```
   
 * while in the console I get errors:
 *     ```
       stellarnav.js?ver=4.9.2:243 Uncaught ReferenceError: jQuery is not defined
           at stellarnav.js?ver=4.9.2:243
       (anonymous) @ stellarnav.js?ver=4.9.2:243
       myscript.js?ver=4.9.2:2 Uncaught ReferenceError: jQuery is not defined
           at myscript.js?ver=4.9.2:2
       (anonymous) @ myscript.js?ver=4.9.2:2
       ```
   
 * Has not the jquery version been defined?
    I do not know what it is though
 * Thanks so much
 *  Thread Starter [mrpress01](https://wordpress.org/support/users/mrpress01/)
 * (@mrpress01)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9883245)
 * I solved it, after a long time I am alone to find out where the problem was. 
   jquery was loaded after the script. I inserted it at the beginning of the header
   with <script> tag. Can you tell me a way to inject jquery into a hook from the
   function.php file? thank you so much.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/#post-9884996)
 * Yes, specify ‘jquery’ tag in an array as a dependency argument when you enqueue
   your own scripts. The format is roughly `wp_enqueue_script('my-script', '/path/
   to/script.js', array('jquery'));`
 * The stellarnav.min enqueue call should specify `array('jquery')` and your ‘myscript’
   should specify `array('stellarnav.min','jquery')` to ensure everything loads 
   in the right order.
 * Unless you’ve seen specific domestication to the contrary, I suspect you don’t
   need both ‘stellarnav’ and ‘stellarnav.min’ enqueued. stellarnav.min is likely
   just a minimized version of ‘stellarnav’. Minimized is for production, the other
   is human readable and is used for development and debugging. It doesn’t hurt 
   to load both in JS language, but it’s wasteful and inefficient.
 * I’m sorry you were left alone for so long. We’re all volunteers here and I mostly“
   drive by” only once a day. Andrew is much more attentive than I am, that’s his
   choice. Once a day is the most I can volunteer for. Nice work figuring it out
   on your own though!

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/include-js-menu/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/include-js-menu/page/2/?output_format=md)

The topic ‘include js menu’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 17 replies
 * 3 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/include-js-menu/page/2/#post-9886972)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics