I'm very new to jQuery but I have had to learn a little to make a responsive website.

my problem is with the horizontal navigation menu. I want it to become a drop-down menu when the screen size is less than or = 657px. The problem is that some of the code is working (the .hide) while the rest isn't

i.e the button i click to get the drop down menu to drop. I'm pretty sure I have made a really silly amateur mistake but I can't seem to figure it out. Thanks for your help.

here is the code I'm using:

2. $(document).ready(function(){
3.     if(screen.width <=657){
4. $('.secondary-navigation-hide').hide();
5. $('#countries-dd').click(function(){
6. $(this).toggleClass('hl');
7. $(this).next().toggle(1);
8. });
10. $('.primary-navigation-hide').hide();
11. $('#categories-dd').click(function(){
12. $(this).toggleClass('hl');
13. $(this).next().toggle(1);
14. });
15. }
16. });