wp_nav_menu, one page design anchors and highlight problem

  • Hi there,

    I have a one page design template theme which works fine, except for one problem I can’t overcome.

    The template uses a custom menu manager, but the limitations in this menu made me decide to replace it with wordpress own menu (using wp_nav_menu). This works great, but because the website is a one page design it uses the anchors tag (the #) to go from page to page. The problem here is, is that I can not use the current-menu-item an current_page_item classes to highlight the active menu item. This is because wordpress adds these classes to all menu items (because of the one page design).

    The solution would be to automatically add a custom class to the active menu item. But the problem is is that I am not that prog-shaffy to come up with a code for this.

    Last couple of days I have been searching for a solution, and came across a few which worked partly. But most solutions that worked added the custom class to all menu items because they only do page checks. What I need is some sort of anchor check.

    Here is the html output of the menu:

    <div class="menu-hoofdmenu-container">
<ul id="menu-hoofdmenu" class="menu">
<li id="menu-item-621" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-621"><a href="https://www.3dinyourhands.com/wp_new/#home">Home</a></li>
<li id="menu-item-592" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-592"><a href="https://www.3dinyourhands.com/wp_new/#portfolio">Portfolio</a></li>
<li id="menu-item-594" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-594"><a href="https://www.3dinyourhands.com/wp_new/#contact">Contact</a></li>
</ul>
</div>

    Thanks in advance.

Viewing 15 replies - 1 through 15 (of 21 total)
  • Kurt

    (@highfxmedia)

    MrMartinH:

    You’ll probably have to do it with javascript. Here are a couple of links that may help:

    https://trevordavis.net/blog/jquery-one-page-navigation-plugin

    https://www.richnetapps.com/automatically_highlight_current_page_in/

    Thread Starter MrMartinH

    (@mrmartinh)

    Hey there,

    Thank you for your reply, unfortunately I can’t get it to work. I tried both your suggested options, and also tried a bunch of other javascript solutions that all suppose to work. But unfortunately they don’t.

    I tried all solutions to the letter (changing the relevant id and class names) but somehow they are getting ignored.

    I can not think of any other solution anymore. Feels like I have tried almost every available option out there.

    Kurt

    (@highfxmedia)

    MrMartinH:

    If you have implemented one of the options identified above, post a link to your site and indicate which one is implemented. I’ll take a look and see if I can see anything.

    Thread Starter MrMartinH

    (@mrmartinh)

    I can not give any access to the website yet, but this is what I have implanted in my header.php between the <head> tags (this is the code of the first link you have me):

    <script src="js/jquery.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {$('#menu-hoofdmenu').onePageNav();});
</script>

    This is the last piece of code before the </head> tag.

    On another forum someone pointed to me that it could be a jquery.noconflict problem with wordpress, so I changed the above code to this:

    <script src="js/jquery.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>

<script type="text/javascript" language="javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {$j('#menu-hoofdmenu').onePageNav();});
</script>

    But with no luck, unfortunately.

    I know the script works. I created a simple test file, apart from wordpress, but with the same menu structure. This worked. So this made me think it is a wordpress problem.

    Could the url output of wordpress be the problem maybe?
    The url output of wordpress is <url>/#home, where the url output of my testfile is <url>/test.html#home.

    If this is the case, I think the problem might be related to jquery.nav.js.

    Thread Starter MrMartinH

    (@mrmartinh)

    I got it working.

    I found out (tx to someone else) that my scrips aren’t loaded. So they never did anything. I also found out that the template I use loads its scrips via an external php file. So I added jquery.nav.js to this file and used this code in my header.php

    <script type="text/javascript" language="javascript">
jQuery(document).ready(function() {jQuery('#menu-hoofdmenu').onePageNav();});
</script>

    Tx for helping me out.

    Kurt

    (@highfxmedia)

    I’m glad I was able to help and that you figured it out.

    Thread Starter MrMartinH

    (@mrmartinh)

    Well. I guess I cheered to early. However the above does work, the code in the jquery.nav.js caused conflicts with other plugins on the site, and also broke the site for ie7. So I guess I am back to where I started. :'(. I think I need something more simple, since I don’t need a scrool function and such, just a class change.

    Its back to the web.

    Thread Starter MrMartinH

    (@mrmartinh)

    I have found this piece of code, which seems to work. But it only works after I click a menu item and then hit refresh.

    So:
    <click> contact button –> refresh, class is added
    <click> another button –> refresh, class is removed from contact and added to the just pressed button.

    Great way to have users interect with your website, but I doubt the usability of this.

    This is the code:

    function extractPageName(hrefString)
{
	var arr = hrefString.split('/');
	return  (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
	for (var i=0; i < arr.length; i++)
	{
		if(extractPageName(arr[i].href) == crtPage)
		{
			if (arr[i].parentNode.tagName != "DIV")
			{
				arr[i].className = "hidemenu";
				arr[i].parentNode.className = "hidemenu";
			}
		}
	}
}

function setPage()
{
	hrefString = document.location.href ? document.location.href : document.location;

	if (document.getElementById("menu-hoofdmenu") !=null )
	setActiveMenu(document.getElementById("menu-hoofdmenu").getElementsByTagName("a"), extractPageName(hrefString));
}

window.onload=function()
{
	setPage();
}

    I think the problem is the windows.onload function, because if I remove this the whole script stops working.

    Hi, have you tried building the menu with the URL type, I often do this to add a home link when a theme is not setup to show_home

    Just add url MenuItems and put in the full path without the ‘#’.

    A link to the site would help as well if you cannot get it working!

    Edit:

    You mean page links in the same page?

    How about using “CSS Classes” on the menu items, when you are in the menu editor [Screen Options] and check the “CSS Classes”, then you can give each menu item a unique class for your script?

    At the moment all menu otems have the ID #home if they have their own ID you should be able to add an active class?

    HTH

    David

    Thread Starter MrMartinH

    (@mrmartinh)

    Hi there.
    I am not sure what you mean by building the menu with the URL type?

    And adding a unique css to each menu item. This could be possible, but I am not sure how to implement the highlighting of items this way. Also I want to try to keep everything as flexible as possible, meaning not diving into the code each time I add a new menu item.

    Or do I misunderstand what you say?

    Hi,
    Have a look at this post, it is one I wrote for adding social media icons, but it should show what I meant about the CSS Classes for the custom menus.

    HTH

    David

    Had a Google and found this, but it looks like high maintenance!

    HTH

    David

    Thread Starter MrMartinH

    (@mrmartinh)

    Hm. This doesn’t seem to work. Off course I can add a css to the menu items, but keeping them activated (highlighted) after clicking on them doesn’t work this way. Or my implementation is wrong.

    None of my menu items have an id of #home. They all do have their own unique ID given by wordpress.

    I will take a look a the last link you gave. Thanks.

    Kurt

    (@highfxmedia)

    Martin: It’s difficult to provide help without looking at the site and what’s being loaded. One of the javascript solutions should work.

    @david: The problem is with a one page, scrolling site. I don’t think the post on your site addresses this at all. Nor does the Google search result.

    Thread Starter MrMartinH

    (@mrmartinh)

    I understand Kurt.

    I like to keep the site in maintenance mode while working on it, Somehow feels more comfy to work that way :P.

    Anyway, here is the link to my website https://www.3dinyourhands.com/wp_new, because I want this problem solved.

    Right now I use the last script I posted. So you will only see anything happen if you click on a menu item, and then refresh the website. The effect is what I need, but then without reloading the website.

    I think I need some onclick event, but I have no js experience whatsoever.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘wp_nav_menu, one page design anchors and highlight problem’ is closed to new replies.