How to properly apply custom style to an existing wordpress menu

// mynewmenu implementation
$('nav ul li').mouseover(function(e){
	//Set the aesthetics (similar to :hover)
	$('nav ul li').removeClass('hovered');
	$(this).addClass('hovered');
});


var pageSize = 4, 
    $links = $(".pagedMenu li"), 
    count = $links.length, 
    numPages = Math.ceil(count / pageSize), 
    curPage = 1
;

showPage(curPage);

function showPage(whichPage) {
    var previousLinks = (whichPage - 1) * pageSize, 
        nextLinks = (previousLinks + pageSize);
    $links.show();
    $links.slice(0, previousLinks).hide();
    $links.slice(nextLinks).hide();
    showPrevNext();
}

function showPrevNext() {
    if ((numPages > 0) && (curPage < numPages)) {
        $("#nextPage").removeClass('hidden'); 
        $("#msg").text("(" + curPage + " of " + numPages + ")");
    } else { 
        $("#nextPage").addClass('hidden'); 
    }
    if ((numPages > 0) && (curPage > 1)) {
        $("#prevPage").removeClass('hidden'); 
        $("#msg").text("(" + curPage + " of " + numPages + ")");
    } else { 
        $("#prevPage").addClass('hidden'); 
    }
}

$("#nextPage").on("click", function() {
    showPage(++curPage);
});
$("#prevPage").on("click", function() {
    showPage(--curPage);
});

.hidden {
    display: none;
}

body {
    font: normal 1.0em Arial, sans-serif;


}


nav.pagedMenu {
    color: red;
    font-size: 2.0em;
    line-height: 1.0em;
    width: 8em;
    position: fixed; 
    top: 50px;
}

nav.pagedMenu ul {

    list-style: none;
    margin: 0;
    padding: 0;
}

nav.pagedMenu ul li {
    height: 1.0em;
    padding: 0.15em;
    position: relative;
    border-top-right-radius: 0em;
    border-bottom-right-radius: 0em;
    -webkit-transition: 
    -webkit-transform 220ms, background-color 200ms, color 500ms;
    transition: transform 220ms, background-color 200ms, color 500ms;
}


nav.pagedMenu ul li.hovered {
    -webkit-transform: translateX(1.5em);
    transform: translateX(1.5em);
}
nav ul li:hover a {
    transition: color, 1200ms;
    color: red;
}
nav.pagedMenu ul li span {
    display:block;
    font-family: Arial;
    position: absolute;
    font-size:1em;
    line-height: 1.25em;
    height:1.0em;
    top:0; bottom:0;
    margin:auto;
    right: 0.01em;
    color: #F8F6FF;

}

a {
    color: gold;
    transition: color, 1200ms;
    text-decoration: none;
}

#pagination, #prevPage, #nextPage {
    font-size: 1.0em;
    color: gold;    
    line-height: 1.0em;
    padding-top: 250px;
    padding-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pagedMenu">
   <ul style="font-size: 28px;">
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li>
    	<li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li>
  </ul>
</nav>

<div id="pagination">
    <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp;
    <a href="#" id="nextPage" class="hidden">Next</a>
    <span id="msg"></span>
</div>

What I’ve done:

In custom CSS theme section, I’ve update the code with the above jsfiddle CSS code;
I’ve updated the header.php, replacing nav id="full-menu" with nav class="pagedMenu" as follows:

Before

    <!-- Start Header -->
       ...

        <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
            <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
            <?php if ($full_menu_true) { ?>
                <nav id="full-menu" role="navigation">
                    <?php if ($page_menu) { ?>
                        <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown  ) ); ?>
                    <?php } else  if(has_nav_menu('nav-menu')) { ?>
                      <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
                    <?php } else { ?>
                        <ul class="full-menu">
                            <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
                        </ul>
                    <?php } ?>
                </nav>
            <?php } ?>
            <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
            <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
            <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
                <div>
                    <span></span><span></span><span></span>
                </div>
            </a>
        </div>
    </header>

    <!-- End Header -->

After

    <!-- Start Header -->
       ...

                <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
                <?php if ($full_menu_true) { ?>
                    <nav class="pagedMenu" role="navigation">
                        <?php if ($page_menu) { ?>
                            <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'pagedMenu', 'walker' => new thb_mobileDropdown  ) ); ?>
                        <?php } else  if(has_nav_menu('nav-menu')) { ?>
                          <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'pagedMenu', 'walker' => new thb_mobileDropdown ) ); ?>
                        <?php } else { ?>
                            <ul style="font-size: 28px;">
                                <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
                            </ul>
                        <?php } ?>
                    </nav>
                    <div id="pagination">
                         <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp;
                         <a href="#" id="nextPage" class="hidden">Next</a>
                         <span id="msg"></span>
                    </div>
                <?php } ?>
                <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
                <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
                <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
                    <div>
                        <span></span><span></span><span></span>
                    </div>
                </a>



    </header>
    <!-- End Header -->

In script-calls.php, jquery and jquery-ui-core is enquequed, also I’ve registered mynewmenu.js a file that include the jQuery code section of the above shown jsfiddle.

At this point, the menu showed up somehow but without animation and the next/previous buttons are missing; also in Chrome console, there is an error Uncaught TypeError: $ is not a functionreffering to this line : $('nav ul li').mouseover(function(e){ .

Live link here. Any thoughts?