Help to fix <li> hover effect after scrolldown

JavaScript
#1

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.

image
image1144×148 25 KB

#Need to be blue…

image
image1241×505 29.3 KB

#2

Hello @smith_underpass,

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

#3

Can confirm that :upside_down_face:

#4

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)
#5

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

1 Like
#6

Here is a screenshot of the menu working correctly.

image
image1232×504 33.2 KB

#7

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

#8

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
#9

Yeah! Correct. Sorry for my English…

1 Like
#10

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:

#11

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

#12

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

#13

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
#15

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');
      }
    });
  });
#16

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

1 Like
#17