Help to fix <li> hover effect after scrolldown

Link: https://primelab.by/
Used template to develop website. Now have a problem. Last link after scroll down is not coming “blue” color after scrolling down. Just click any other element and mouse over it.

#Need to be blue…

Hello @smith_underpass,

I opened your link to experiment. All menu items are turning blue in my browser.

Can confirm that :upside_down_face:

Send me screen please of last menu element. Still not working.

  1. Click last element
  2. It should scroll down
  3. Check is that coming blue auto (mouse out it to check)

Oh, I understand. You mean when clicked it should remain blue?

1 Like

Here is a screenshot of the menu working correctly.

I think he means that when you click on it the link remains blue like all the other links

It’s because you hold mouse on that element (:hover), i’m talking about other… Try to click another menu element and after that it will be still blue.

1 Like

Yeah! Correct. Sorry for my English…

1 Like

Don’t worry about it. On a different note I love the template. Is it a free download or do you have to pay for it? :joy:

Free) But i still need to FIX it. Cause temlate have too much bugs

Maybe if you send a photo of the CSS style tag that is used for the links I could help you more?

Ah thanks for clarifying! I can’t seem to identify the bug right away. The problem is with your jQuery somehow, as this code actives the underline.

  // Navigation active state on scroll
  var nav_sections = $('section');
  var main_nav = $('.main-nav, .mobile-nav');
  var main_nav_height = $('#header').outerHeight();

  $(window).on('scroll', function () {
    var cur_pos = $(this).scrollTop();
  
    nav_sections.each(function() {
      var top = $(this).offset().top - main_nav_height,
          bottom = top + $(this).outerHeight();
  
      if (cur_pos >= top && cur_pos < bottom) {
        main_nav.find('li').removeClass('active');
        main_nav.find('a[href="#'+$(this).attr('id')+'"]').parent('li').addClass('active');
      }
    });
  });
1 Like

It don’t add class “active” to last element…

  var nav_sections = $('section');
  var main_nav = $('.main-nav, .mobile-nav');
  var main_nav_height = $('#header').outerHeight();

  $(window).on('scroll', function () {
    var cur_pos = $(this).scrollTop();
  
    nav_sections.each(function() {
      var top = $(this).offset().top - main_nav_height,
          bottom = top + $(this).outerHeight();
  
      if (cur_pos >= top && cur_pos <= bottom) {
        main_nav.find('li').removeClass('active');
        main_nav.find('a[href="#'+$(this).attr('id')+'"]').parent('li').addClass('active');
      }
    });
  });

Find the solution. Problem was that the last element was “footer”, but all elements have “section”.

1 Like