Slicknav with Wordpress

Question

I am trying to use SlickNav with a custom theme on Wordpress. I feel as though I have tried everything to make it work, and have not been able to find anyone with similar issues. The site is not yet live, so I have no link to share, I'm afraid.

First, I had SlickNav installed as per the instructions on the plugin's website (working just fine before adding Wordpress-related code), and I tried to modify it for Wordpress. In my functions.php, I added the ul ID of "menu":

    }

add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(

array(

'main-menu' => __( 'Main Menu' ),
'menu_id'         => 'menu'

    )
);

Added the following in my header.php, within the head tag but prior to calling the wp_head and before the body tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/css/slicknav.css" />
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.slicknav.min.js"></script>

And added this in my footer.php prior to calling the wp_footer and closing body tag:

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.slicknav.js">
$(document).ready(function(){
$('#menu').slicknav();
prependTo:'#demo1'
});
</script>

I tried replacing the <?php bloginfo("template_url"); ?> with any and all variations I found on Wordpress forums; even replaced it with a hard link to the directory, but nothing worked.

Then I deleted all that, and added this to my functions.php:

function slicknav_scripts() {
wp_enqueue_script( 'jquery' );
wp_register_script( 'jqueryui', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
wp_enqueue_script( 'jqueryui' );
wp_register_script( 'slicknav', get_template_directory_uri().'/js/jquery.slicknav.min.js');
wp_enqueue_script( 'slicknav' );
wp_register_style('slicknavcss',get_template_directory_uri().'/css/slicknav.css');
wp_enqueue_style('slicknavcss');
}  
add_action('wp_enqueue_scripts', 'slicknav_scripts');

And added this to my header.php; when that didn't work, I deleted it and added it to my footer.php:

<script type="text/javascript">
jQuery('#myelement').slicknav();
</script>

When that didn't work, I deleted everything, went back to square one, but deleted <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>, assuming perhaps it was a jquery issue. But that didn't work.

At this point, having tried just about everything I can think of, I'm starting to wonder if the answer is pretty simple/right under my nose, but I've just been staring at it too long. Any help would be greatly appreciated.

Answer 1

AHA! I got it to work. I added the enqueue code I provided to the functions.php, used this link (http://codex.wordpress.org/Using_Javascript) as a guide to properly add the scripts to my header and footer; adjusted the jquery script to match Wordpress's given ul ID and also changed by CSS to reflect it.