Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #561103

    HI

    I would like to change the color of the fullwidth sub menu item when it reaches its specific content section related to the id given. currently it only highlight if you click on it, so if i should scroll to any other section the link clicked on stays highlighted.

    • This topic was modified 8 years, 5 months ago by Diezel23.
    #561395

    Hey Gavin!

    Instead of using custom menu, can you please go to Appearance > Menus and create a new menu with your anchor points and then edit your element and choose to display that menu?

    Best regards,
    Yigit

    #561481

    Hi Yigit

    It is a created menu that needs to go to each section related to the id

    #561840

    Hey!

    Please add this code in the functions.php file courtesy of Marcus Ekwall from jsfiddle:

    // menu active
    function add_custom_script(){
    ?>
    <script>
    (function($){
    	// Cache selectors
    var lastId,
        topMenu = $(".av-subnav-menu"),
        topMenuHeight = topMenu.outerHeight(),
        // All list items
        menuItems = topMenu.find("a"),
        // Anchors corresponding to menu items
        scrollItems = menuItems.map(function(){
          var item = $($(this).attr("href"));
          if (item.length) { return item; }
        });
    
    	// Bind to scroll
    	$(window).scroll(function(){
    	   // Get container scroll position
    	   var fromTop = $(this).scrollTop()+topMenuHeight;
    
    	   // Get id of current scroll item
    	   var cur = scrollItems.map(function(){
    	     if ($(this).offset().top < fromTop)
    	       return this;
    	   });
    	   // Get the id of the current element
    	   cur = cur[cur.length-1];
    	   var id = cur && cur.length ? cur[0].id : "";
    
    	   if (lastId !== id) {
    	       lastId = id;
    	       // Set/remove active class
    	       menuItems
    	         .parent().removeClass("active")
    	         .end().filter("[href=#"+id+"]").parent().addClass("active");
    	   }
    	});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');
    

    Use this in the Quick CSS field afterwards:

    #top .av-subnav-menu > li > a:hover, #top .av-subnav-menu > li.active > a {
        background: #2F3F4F;
        color: #FACC08;
    }

    Regards,
    Ismael

    #563831

    Hi Thanks for this

    There is still an issue however.

    If you click on the relevant link to scroll to the section and then just scroll further or up, the clicked link still stays highlighted regardless if it is on the correct section or not.

    You can see it on the link I provided

    #564352

    Hi!

    Did you remove the code? Please add it again then post the login details here. We will check it.

    Best regards,
    Ismael

    #564456

    No the code is not removed, if you followed the steps I have stated above you will see what i mean.
    The clicked menu item and the scrolled item will be both highlighted if you should scroll to a different section and not click on the link.

    Login in details?

    Are you wanting to get into the backend?

    #565184

    Hi,

    Yes, we will need WordPress login details to check the code. Please post them in the Private Content area of your reply.

    Regards,
    Rikard

    #565283

    Hi

    Herewith the login details

    #565940

    Hi!

    We added a little css modification. Please remove browser cache or hard refresh the page.

    Best regards,
    Ismael

    #565961

    Thanks a mill Ismael
    I appreciate your support and effort.

    #566434

    Hi,

    Glad we could help :-)

    Thanks,
    Rikard

    #576830

    Hello,

    I have the same problem, the link jumps to the link before when the one suppose to be active , can you also take a look at my site code.

    Thank you in advance

    #576840

    @dilge

    add this to your css

    #top .av-subnav-menu>li>a:focus {
        background: transparent;
        color: #FFFFFF;
    }
    #top .av-subnav-menu > li > a:hover, #top .av-subnav-menu > li.active > a {
        background: #000000;
        color: #fffff;
    }
    #576842

    Thank you for quick reply. Do you mean only this css or css and php code up together?

    #576845

    No it doesn’t help the function, the problem is when i click the link it highlights the link before not the active one.

    #576846

    @dilge

    You need to add the php above that ishmael gave to the functions.php page and then the css i just gave you to your style.css

    #576851

    Yes I added that code to function.php, but the problem continues for example I am clicking second link ( active) but the first link highlighting.

    • This reply was modified 8 years, 4 months ago by dilge.
    #576890

    @dilge Can you perhaps post the link to the site in question?

    #576907

    @Diezel23

    Thank you for your help. Have a wonderful day

    #577550

    Hi @dilge,

    Let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    #577555

    Hi @Rikard

    Thank to Kriesi team they fixed the php issue and the function work perfectly, I just have another issue regarding css. I created another reply under the topic i started, you can follow from the link below.

    Let me know if you can help me figure out why the css rule is not working.

    Thank you in advance

    #578254

    Hey!

    Alright. We’ll look into it and we’ll close this thread for now. See you on the other thread. :)

    Regards,
    Ismael

Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Change Fullwidth Sub Menu color on scroll’ is closed to new replies.