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


    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.

    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,


    Hi Yigit

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



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

    // menu active
    function add_custom_script(){
    	// Cache selectors
    var lastId,
        topMenu = $(".av-subnav-menu"),
        topMenuHeight = topMenu.outerHeight(),
        // All list items
        menuItems = topMenu.find("a"),
        // Anchors corresponding to menu items
        scrollItems ={
          var item = $($(this).attr("href"));
          if (item.length) { return item; }
    	// Bind to scroll
    	   // Get container scroll position
    	   var fromTop = $(this).scrollTop()+topMenuHeight;
    	   // Get id of current scroll item
    	   var cur ={
    	     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
    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 > > a {
        background: #2F3F4F;
        color: #FACC08;



    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



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

    Best regards,


    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?



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




    Herewith the login details



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

    Best regards,


    Thanks a mill Ismael
    I appreciate your support and effort.



    Glad we could help :-)




    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



    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 > > a {
        background: #000000;
        color: #fffff;

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


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



    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


    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.

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



    Thank you for your help. Have a wonderful day


    Hi @dilge,

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

    Best regards,


    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



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


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