I am trying to add some .JS to my site to make my navigation 'MENU' slide down (rather than just appear). This is the jsfiddle:


Here is my actual Magento html code:

<div class="skip-links">

<a class="skip-link skip-nav" href="#header-nav">

<span class="icon"></span>
<span class="label">



Then I added the following into my '/app.js'

$(document).ready(function() {
$('.skip-links').hide().before('<a href="#" id="toggle-skip-links" class="button">Open/Close</a>');
$('a#toggle-skip-links').click(function() {
    return false;

But it's not working. Any ideas?


Seems your jQuery would be conflicting with prototype (if your magento site is running with prototype)

add noconflict after jQuery core is loaded but before the jquery run code


and use jQuery instead of $ in your jquery code...

jQuery(document).ready(function() {
jQuery('.skip-links').hide().before('<a href="#" id="toggle-skip-links" class="button">Open/Close</a>');
jQuery('a#toggle-skip-links').click(function() {
return false;

hopefully that should do the trick..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.