Trouble with internal navigation on a single page site

The front-page panel for the section is missing ID name.

Are your using a third-party plugin or script for the smooth scroll-to effect? The browser inspector is showing the script constantly checking for a click all href with # and the target.

If you have some basic jQuery experience, modify global.js to create a full one-page navigation solution.

A usability suggestion, set the link for Online Ordering scroll-to the section on page, and add a “home” link to return to the front page. If I landed on that page and wanted to order, and clicked the link, it would reload the page over and over.

Hi Backbone,

The front-page panel for the section is missing ID name.

Where do I set that? I don’t recall setting it for the Location page. Is it on the Gift page itself? Or should it be set by the theme when it assembles the page?

Are your using a third-party plugin or script for the smooth scroll-to effect?

Yes, I’m using the plugin scroll2id. It gives the smooth scroll effect. But even without the plugin, I see navigation to the Location page but not the Gift Page.

If you have some basic jQuery experience, modify global.js to create a full one-page navigation solution.

I don’t, I’m afraid. But the twentyseventeen theme is supposed to handle this, right?

A usability suggestion, set the link for Online Ordering scroll-to the section on page, and add a “home” link to return to the front page.

This is a good idea. But I don’t how to do it in the theme. The Online Ordering is the home page in the twentyseventeen customizer. How do I create a target on the Online Ordering section of the page? I don’t think I can apply a custom class to the Title block on a page, only to content blocks.

Thank you for the help so far, and I apologize that I don’t know how to implement your suggestions.

-Michael

• This reply was modified 5 years, 11 months ago by michaelshulman.

I think I fixed it!

I looked at the source, and found that the ID for the first content is “primary”, and the second is “panel1” and the ID for the Location page is “panel2”.

I set the targets in the theme menu to /#primary, /#panel1, and /#panel2, respectively, and now it works.

It doesn’t work when the user goes to the Recipes page, since that page isn’t a panel on the main page. I now need a way to create a different menu for the recipe pages, so I can use non-hash URLs in that menu.

Was this the correct fix?

-ms

Great!

It’s an invaluable lesson; initially work within the theme construction ( markup, navigation, etc.) when customizing the look and feel. Once you understand it, alterations become much quicker, more predictable and the most important; upgrading won’t be a nightmare.

The scroll-to jquery function called on the front page menu bar.
/template-parts/header/site-branding.php

if statement check three conditions
-is it twentyseventeen_is_frontpage() OR
-is the blog page set to front page AND
-if either is true, is there a nav menu with the location ‘top’?
-then show ( ‘icon’ => ‘arrow-right’ )

The scroll-to jquery function
/assets/js/global.js

-find a class value “menu-scroll-down”
$menuScrollDown = $body.find( ‘.menu-scroll-down’ )
-function

$menuScrollDown.click( function( e ) {
    e.preventDefault();
    $( window ).scrollTo( '#primary', {
        uration: 600
      , offset: { top: menuTop - navigationOuterHeight }
     });
});

Now that you know how to trigger the function and the target of the function, you can reuse. You only need the class name “menu-scroll-down” to fire function.

In Menu, screen options show class. Add the class name to the menu item.
On section page, you need to add the corresponding ID name at the location of the target. It can be as simple as, text mode, <h2 id=”your_anchor_name”>Text</h2> or use a transparent img.png, and add the id value to it, with less chance of being accidently deleted in an edit.

Normally, a function is written to conditional check which navigation menu with the properly constructed target URI to load. You probably need to add the absolute URI domain.com/#anchor_name on the menu links.

• This reply was modified 5 years, 11 months ago by backbone.
• This reply was modified 5 years, 11 months ago by backbone.

Hi backbone,

I never modified any js. I just added a plugin to do the smooth scroll, but deactivated the plugin as part of my investigation.

I don’t see how to do this in WordPress 5.0

In Menu, screen options show class. Add the class name to the menu item.

Are you referring to the Menus page in Appearance (https://montclairfarms.com/wp-admin/nav-menus.php), or on the post page itself (https://montclairfarms.com/wp-admin/post.php?post=386&action=edit). I don’t see any way to add a class name in either place.

On section page, you need to add the corresponding ID name at the location of the target. It can be as simple as, text mode, <h2 id=”your_anchor_name”>Text</h2> or use a transparent img.png, and add the id value to it, with less chance of being accidently deleted in an edit.

In 5.0, with Gutenberg, I can see the code for the body of the post, but there doesn’t seem to be a way to see the HTML view of the page title itself. Again, I’m trying to avoid modifying any javascript on the site, and I want to do everything through the UI.

Finally, I was able to solve my problem, by referring using “panel1” as the URL target in the Menu with a Custom Link menu item type. I was looking for a solution that used the page slug, for more flexibility.

-Michael

Read the article “Building a Scrollable One-page Website” at https://kinsta.com/blog/twenty-seventeen-theme/. I think You will have some use of it. =)