inner link menu items

Update:

Issue 1. It does scroll, but not exactly the same as with a ‘normal’ menu item. I can live with it because it’s just a minor thing. For developer it’s an issue for further investigation perhaps.

Issue 2. Has to be resolved otherwise the plugin can’t be used for one page navigation themes. That would be a pitty, yeh?

Hi violacase,

Glad you’re liking the plugin.

1. The menu should close on scroll completion without adding any extra code. You should only need to add custom code if you want the panel to close prior to the scroll completing.

2. I really can’t do much to investigate your issue without seeing your site. Items become highlighted when they are current, or when you have checked the Highlight setting. For example, if you had a link to the home page in each submenu, or if all of your items were pointing to the home page, they would all be current, and therefore all be highlighted.

I don’t know what an “Inner page link” menu item is, it sounds like it is specific to your theme.

Hope that helps,

Chris

Thanks for your reply, sevenspark.

Here is the link to my test site. I’ll let it be as it is for another 3 days so you can see what I mean.

‘Inner site link’ are my own words for this (because I don’t know the official terms):

In a custom menu item I have e.g. this for the URL:
https://mijnspeelplek.com/#ez-feature-top-container pointing to a #div on the same page.

(toggle break point: 900)

Nota: the above link runs `jQuery( ‘.shiftnav-target’ ).on( ‘click’ , function(){
jQuery( ‘.shiftnav’ ).shiftnav( ‘closeShiftNav’ );
});`

Hi violacase,

Your menu items are all marked as current on the home page because you are using custom links for each item, and have the URL set to the home page URL. WordPress detects this as being the current page, and sets them as current menu items.

Instead of using an absolute URL, I suggest that you just set the hash, i.e.:

#ez-feature-top-container

not

https://mijnspeelplek.com/#ez-feature-top-container

Also, ShiftNav has “ScrollTo” functionality, which is what I assumed you were using (but that doesn’t seem to be the case). If you use ShiftNav’s ScrollTo functionality, the menu will automatically slide shut when the scroll completes, and you won’t need any external javascript. Though if you have other scroll-to scripts running on the menu (which must be the case, since your site is scrolling on click without using ShiftNav’s ScrollTo setting), then that might interfere with ShiftNav’s functionality.

Hope that helps,

Chris

Hi Chris,

Thanks for your reply.

I wasn’t aware of the ScrollTo functionality of your plugin… Sorry, should have read the FAQ.

I make use now of the scrollTo stuff of your plugin in the menu items, changed the urls to relative and only use your JS now for navigation.

Some issues are solved, others arised:

1. The reason I used full URLS is because of this: If one of the menu-items is a normal page and the users visits that page the permalink changes to e.g. mijnspeelplek.com/blog
When you click a relative url in the menu when on that page the permalink resolves now as e.g. mijnspeelplek.com/blog/#ez-feature-top-container which of course isn’t the right URL
You can see this issue on mijnspeelplek.com when you click on the ‘blog’ menu item.

2. The active state on custom menu items isn’t set I think because the background color remains the same as an inactive stated menu item.

3. The ScrollTo functionality only works in mobile view or am I missing something?

1. Yes, that makes sense. I suspect what you’ll want to do in that case is write a filter that removes the current-menu-item classes (those are determined and added by WordPress, not ShiftNav)

2. I’m not following. Which item should be active?

3. ScrollTo should work at any size.