Title: Javascript breaks nav links
Last modified: August 31, 2016

---

# Javascript breaks nav links

 *  Resolved [Konstabel](https://wordpress.org/support/users/konstabel/)
 * (@konstabel)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-breaks-nav-links/)
 * Hi All,
 * I have a fixed menu at the top of the screen that appears when scrolling down
   the page. The navbar uses javascript.
 * Everything works fine, except that the links in the menu do not work.
 * This is my javascript code placed in the head:
 *     ```
       <script type="text/javascript">
       $(document).ready(function(){
         $('#navigation a, #fixedheader a').on('click', function(e) {
           e.preventDefault();
         });
   
         $(window).on('scroll',function() {
           var scrolltop = $(this).scrollTop();
   
           if(scrolltop >= 65) {
             $('#fixedheader').fadeIn(500);
           }
   
           else if(scrolltop <= 60) {
             $('#fixedheader').fadeOut(50);
           }
         });
       });
       </script>
       ```
   
 * And here is my code in the body:
 *     ```
       <div id="fixedheader" class="header">
       		<div id="fixedwrap" class="wrap">
   
       			<!---start-top-nav---->
       			<div id="fixedtop" class="top-nav">
       				<nav id="fixednav" class="main-navigation" role="navigation">
       				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'stofpadavonture' ); ?></button>
       				<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
       				</nav><!-- #site-navigation -->
       			</div>
       			<div class="clear"> </div>
       			<!---End-top-nav---->
       		</div>
       	</div>
       	<!---End-fixed-header---->
       ```
   
 * Can anybody please help me to get the links working?
 * Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [neotechnomad](https://wordpress.org/support/users/neotechnomad/)
 * (@neotechnomad)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-breaks-nav-links/#post-6951586)
 * The links do not work because you have prevented their default function, which
   is linking to somewhere, by using this `e.preventDefault();`
 * And using jQuery No Conflict would be better for not creating problems with plugins,
   etc.
 *     ```
       <script>
       jQuery.noConflict()
       (function($){
   
       //jQuery with '$' goes in here
   
       })(jQuery);
       </script>
       ```
   
 *  Thread Starter [Konstabel](https://wordpress.org/support/users/konstabel/)
 * (@konstabel)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-breaks-nav-links/#post-6951712)
 * Hi Neo,
 * Thanks for your reply.
 * I got it working by removing the `e.preventDefault();`.
 * I tried implementing your suggestion, but I must be doing something wrong.
 * This is what I did:
 *     ```
       <script>
       jquery.noConflict()
       (function($){
         $('#navigation a, #fixedheader a').on('click', function(e) {
         });
   
         $(window).on('scroll',function() {
           var scrolltop = $(this).scrollTop();
   
           if(scrolltop >= 65) {
             $('#fixedheader').fadeIn(500);
           }
   
           else if(scrolltop <= 60) {
             $('#fixedheader').fadeOut(50);
           }
         });
       })(jquery);
       </script>
       ```
   
 * What am I not understanding?
 *  Thread Starter [Konstabel](https://wordpress.org/support/users/konstabel/)
 * (@konstabel)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-breaks-nav-links/#post-6951713)
 * I found the problem. `'jQuery'` is case sensitive. I used `'jquery'`.
 * Why is the jQuery option better?
 *  [neotechnomad](https://wordpress.org/support/users/neotechnomad/)
 * (@neotechnomad)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-breaks-nav-links/#post-6951730)
 * No… your script was in error…
 * This…
 *     ```
       <script>
       jquery.noConflict()
       (function($){
         $('#navigation a, #fixedheader a').on('click', function(e) {
         });
   
         $(window).on('scroll',function() {
           var scrolltop = $(this).scrollTop();
   
           if(scrolltop >= 65) {
             $('#fixedheader').fadeIn(500);
           }
   
           else if(scrolltop <= 60) {
             $('#fixedheader').fadeOut(50);
           }
         });
       })(jquery);
       </script>
       ```
   
 * Should be this…
 *     ```
       <script>
       jQuery.noConflict()
       (function($){
   
       	$('#navigation a, #fixedheader a').on('click', function(e) {
   
       		$(window).on('scroll',function() {
       			var scrolltop = $(this).scrollTop();
   
       			if(scrolltop >= 65) {
       				$('#fixedheader').fadeIn(500);
       			}
   
       			else if(scrolltop <= 60) {
       				$('#fixedheader').fadeOut(50);
       			}
       		});
   
       	});
   
       })(jQuery);
       </script>
       ```
   
 * jQuery _is_ JavaScript, so it’s not really one or the other, but there are distinct
   advantages of using jQuery over writing raw JavaScript, such as:
    The amount 
   of code you need to write is alot smaller It handles cross browser differences
   for you Easy DOM manipulation It presents a single events API Effects such as
   fading, sliding and more It makes Ajax much, much simpler and much more…
 *  Thread Starter [Konstabel](https://wordpress.org/support/users/konstabel/)
 * (@konstabel)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-breaks-nav-links/#post-6951739)
 * Thanks for your help!!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Javascript breaks nav links’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [nav bar](https://wordpress.org/support/topic-tag/nav-bar/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 2 participants
 * Last reply from: [Konstabel](https://wordpress.org/support/users/konstabel/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/javascript-breaks-nav-links/#post-6951739)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics