Return to previous page

Current Menu Item not working in Royal v1.3

This topic has 10 replies, 3 voices, and was last updated 10 years, 3 months ago ago by Eva Kemp

  • Avatar: ckitso
    ckitso
    Participant
    October 7, 2014 at 15:25

    Hi I recently updated a development site to Royal v1.3 but since doing so the current menu item highlighting isn’t working correctly and there is a bug when the fix nav bar appears.

    If I go to a page like about us, the menu item “about us” is highlighted as per normal using css current menu. However if i scroll down the page and the fixed nav menu appears it no longer highlights the correct menu item, instead it highlights the first menu item. It appears as though it is attaching the current-menu class to the wrong menu item on activation of the fixed menu.

    Is this a known issue? Is there a work around ?

    #18656 Copied
    9 Answers
    Avatar: ckitso
    ckitso
    Participant
    October 7, 2014 at 17:08

    It appears as though the problem exists even without the use of the fixed header.
    As soon as i scroll down the page the current menu highlight moves to the first item in the menu. It seems as though scrolling down the page which hides the menu, somehow triggers an event to attach a current-class to the first menu item.

    For the life of me I can’t figure out why it would do that ? I can’t find any script to trigger this action.

    When I revert to version 1.2 everything works perfectly. Any assistance would be greatly appreciated.

    Thanks

    #18681 Copied
    Avatar: ckitso
    ckitso
    Participant
    October 7, 2014 at 17:30

    Ok it seems I have found the problem.

    It seems the following code in the etheme.js is causing the change in current-item-class.
    I simply removed it and everything works, obviously not the best idea to change core files so if there is another work around please let me know.

    // **********************************************************************// 
    // ! One page hash navigation
    // **********************************************************************//
    
    $(function() {
    
    	// Click on menu item with hash
	    var menu = $('.menu');
	    menu.each(function() {
	    	var that = $(this);
		    var links = $(this).find('a');
		    links.click(function(e){
		    	if($(this).attr('href').split('#')[0] == window.location.href.split('#')[0]) {
		    		e.preventDefault();
			    	var hash = $(this).attr('href').split('#')[1];
			    	
			    	//et_change_active_item(hash);
			    	et_scroll_to_id(hash);
		    	}
		    });
	    });
	    
	    // if loaded page with hash
	    var windowHash = window.location.hash.split('#')[1];
	    
	    if(window.location.hash.length > 1) {
	    	setTimeout(function(){
	    		et_scroll_to_id(windowHash);
	    	}, 600);
	    }
	    
	    function et_scroll_to_id(id){
		    var offset = 150;
	    	var position = 0;
	    	
	    	if(id != 'top'){
		    	if($('[data-anchor="'+id+'"]').length < 1) {
			    	return;
		    	}
		    	position = $('[data-anchor="'+id+'"]').offset().top - offset;
	    	}
		    
	    	
	    	$('html, body').stop().animate({
		    	scrollTop: position
	    	}, 1000, 'easeOutCubic', function() {
		    	et_change_active_item(id);
	    	});
	    }
	    
	    function et_change_active_item(hash) {
	    	var itemId;
	    	var menu = $('.menu');
	    	
	    	menu.find('.current-menu-item').removeClass('current-menu-item');
	    	
	    	if(hash == 'top') {
	    		menu.each(function() {
		    		$(this).find('li').first().addClass('current-menu-item');
	    		});
	    		return;
	    	}
	    	
	    	menu.find('li').each(function() {
		    	var thisHash = $(this).find('>a').attr('href').split('#')[1];
		    	if(thisHash == hash) {
			    	itemId = $(this).attr('id');
		    	}
	    	});
	    	
	    	$('.'+itemId).addClass('current-menu-item');
	    }
	    
	    
	    $(window).scroll(function() {
	    	if($(window).scrollTop() < 200) {
		    	et_change_active_item('top');
	    	}
	    });
	    
	    // change active link on scroll
	    $('[data-anchor]').waypoint(function() {
		    var id = $(this).attr('data-anchor');
	    	et_change_active_item(id);
	    }, { offset: 150 });

    });
    #18684 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    October 8, 2014 at 08:34

    Hello,

    Thank you for notification.
    We’ll take this issue into our account for further investigation.

    Regards,
    Eva Kemp.

    #18790 Copied
    Avatar: ckitso
    ckitso
    Participant
    October 8, 2014 at 09:57

    Thanks Eva.

    #18807 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    October 8, 2014 at 11:30

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

    #18825 Copied
    Avatar: Royalty
    Royalty
    Participant
    October 10, 2014 at 13:25

    Same problem here. Your solution worked for me (thanks for sharing it!) but a real bugfix would be really appreciated because this bug also exists in your demo: https://www.8theme.com/demo/royal

    #19173 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    October 10, 2014 at 15:56

    Hello @Royal Fan,

    We’ve taken this issue into our account and it should be fixed in future update.
    Sorry for inconveniences.

    Regards,
    Eva Kemp.

    #19199 Copied
    Avatar: Royalty
    Royalty
    Participant
    October 29, 2014 at 19:45

    This bug isnt fixed in the just released version 1.4. When will you fix it?
    Thank you in advance.

    #22349 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    November 3, 2014 at 13:04

    Hello @Royal Fan,

    Please take our apologies for the troubles, but our developers are working on this bug and it will be fixed in the next update. If they found the solution much more earlier we’ll notify you.

    Thank you for your understanding and patience.

    Regards,
    Eva Kemp.

    #22926 Copied

  • Tagged: , , , , , , ,

  • Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Current Menu Item not working in Royal v1.3’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Spice Store – WordPress WooCommerce Theme
lazy-placeholder
Carwash – WordPress WooCommerce Theme
lazy-placeholder
Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Corporate – WordPress WooCommerce Theme
lazy-placeholder
Sushi Store – WordPress WooCommerce Theme
lazy-placeholder
Interior – WordPress WooCommerce Theme
lazy-placeholder
Hotel – WordPress Theme
lazy-placeholder
Architecture – WordPress Theme
lazy-placeholder
Pizza Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.