[cormip]

OK, I updated the menu links to start with a # and it fixed the smooth-scroll issues. However, using such links introduces a new problem for which I did find a work-around which I’ll document for other who might run into the problem:

If the user clicks to view a team member page, that page does not contain the sections or anchors that the home page has. Therefore, if the menu link is simply “#contact”, this works on the home page to scroll to the contact form I placed at the bottom of the page. However, this menu now no longer works on the Team member pages, since that anchor doesn’t exist.

The Solution

Create 2 separate menus: one with just the anchors as links (e.g. #contact) and another with the full URL with anchor link (e.g. //mywebsite.com#contact). The second menu you set as the “default” for the site. The first you manually set for the given page using the Page Meta tab.

This combo makes the smooth-scroll work on the home page, and the team, portfolio, etc theme sub-pages will also have a working menu that navigates back to the proper section of the Home Page.

[cormip]

OK, sorry, didn’t even know that was an option. I’ve gone ahead and added the smooth-scroll-link custom class to the menu items, however it appears that it applies the class to the li container and not the anchor tag itself:

<li class="menu-item-22 smooth-scroll-link menu-item menu-item-type-custom menu-item-object-custom">
   <a href="//stormwaternc.com#about">About<span class="nav-line"></span></a>
</li>

Looking at the code that triggers it in function.js, it appears that this class needs to be specifically applied to the anchor tag:

// SMOOTH SCROLL LINKS
jQuery('a.smooth-scroll-link').on('click', function(e) {

Therefore, the smooth scroll still isn’t working…

[cormip]

It scrolls to the correct section of the page, only it does not do it smoothly. I no longer see where I can add an optional class (smooth-scroll-link) to menu items like in this picture.

What I see is attached below.

Attachments:

You must be logged in to view attached files.

[cormip]

Hmmm, also, smoothscroll links no longer work, throwing an error:

Uncaught TypeError: Cannot read property ‘top’ of undefined

functions.js line 151

jQuery('html, body').stop().animate({
	scrollTop: jQuery(linkHref).offset().top + spacerHeight - headerHeight - 10
}, 1000, 'easeInOutExpo');

[cormip]

Yeah, I discovered this as well and have been trying different CSS overrides. The default for @media only screen and (min-width: 1500px) was definitely way off. It’s rather unclear what dimensions would be best for the video. i.e. Height vs Width proportions.

[cormip]

Hmmm, did you do something? Or did it start working by itself? I had tried hard refresh numerous times before, and also alternate browsers.

Paul