Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1282567

    Hello,

    I would like to achieve the same functionality of the Enfold Game Demo Menu but using a sub menu on a page (fullwidth sub menu), working with anchor tags on the same page. Is it possible?

    I’m interested specifically in achieving the highlighted selected navigation links on the sub menu when scrolling through the page or clicking on each specific sub menu item.
    For example, in the Enfold Game Demo, the “About” text on the menu turns to white when I click on it and the page scrolls to that section, or when I scroll the page through that section.

    Your help would be much appreciated.

    Thanks in advance,
    Raquel

    #1283119

    Hey raquelravanini,

    Thank you for the inquiry.

    Yes, that is possible. You have to create sections using the Color Section element with a unique ID, which can be added in the color sections’ Advanced > Developer Settings > Custom ID Attribute field. We can then create a menu item or a source anchor that links to this color section, so when the unique ID of the color section is “section-1” for example, the navigation URL of the menu item or of the source anchor should be “http://site.com/page/#section-1”, and when clicked, the page should scroll to the color section or to the destination anchor.

    Best regards,
    Ismael

    #1283258

    Thank you for your answer.

    I created a test page (link in the private content) with a menu and submenu (full width sub menu) with different anchor tags.
    I created color sections with custom id attributes for each one, and the navigation is working correctly.

    What I would like to achieve is to have the submenu itens behave like the menu itens, so that when I click a submenu link or scroll down to its color section the submenu item changes color, to indicate that is is showing that particular submenu section.

    I tried adding a css code like

    #top .av-subnav-menu > li.current-menu-item > a .avia-menu-text,  {
        color: #333333;
    }

    but it did not work. How can I change the color of the “current” submenu item?

    Could you point me in the right direction?
    Thanks in advance,
    Raquel

    #1283705

    I have tried to target the current submenu item using

    #top .av-subnav-menu > li.current-menu-item a {
        color: red !important;
    }

    but it just affected the first item of the submenu.

    Is there a way to target each submenu item as it is clicked?

    #1283846

    Hi,

    Thank you for the update.

    We can use this script in the functions.php file to add a unique class name (current-menu-item) to the active item or the item that is recently clicked.

    // a custom script
    // add current-menu-item class to active item
    function ava_custom_script_mod() {
        if ( wp_script_is( 'avia-default', 'registered' ) ) {
            wp_add_inline_script( 'avia-default', '
    		(function($) {
    			$("#top .av-subnav-menu > li").on("click", function() {
    				var item = $(this);
    				var parent = $(this).parent("#menu-sub-menu");
    
    				if(item.is(".current-menu-item")) return;
    
    				parent.find("li").removeClass("current-menu-item");
    				item.addClass("current-menu-item");
    			});
    		})(jQuery);
    	');
        }
     }
     add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod', 9999);
    
    

    Then use the same css code above to change the color of the font.

    #top .av-subnav-menu > li.current-menu-item a {
        color: red !important;
    }

    Best regards,
    Ismael

    #1283862

    Thank you for the code!

    Unfortunately it does not completely solve the issue, I need the current submenu item to turn red also when the page is scrolled to that particular anchor ID too, just as it happens with the main menu on top.

    Currently only the main menu links are turning red when the page is scrolled to their respective anchor, not the submenu links.

    Is it possible?

    Thanks in advance,
    Raquel

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.