One Page Navigation Menu Link Problem

[Symbiosis]

Hi there,

I’ve set up the menu and the header on Pro for One Page navigation. My issue is the link doesn’t work when I clicked to other pages though navigation inline is working.

Here is how my settings.

The page ID matches with the custom link in menu. The one page navigation in each page has been activated to link to the header name.

Another question as I am here, how to change the header location from top to bottom.

Thanks.

[ruenel]

Hello @Symbiosis,

Thanks for writing in! To properly set up one page navigation, please check this documentation first:

• https://theme.co/docs/set-up-one-page-navigation

What you need is to create two sets of menu. One menu is exclusive used for one page navigation. This is the menu where you insert the relative link or the #in-name as your menu item links.

For the second menu, this is the primary menu which means that you will have to insert absolute link or the https://example.com#id-name as your menu item link.

Now, if you are using Pro theme and have created a custom header, you need to duplicate your header. The first header will be for your one page navigation and the second header will be assigned as your global header. With this setup, you should now have a clue which menu you need to place in the correct header.

Hope this makes sense.

[Symbiosis]

Hi @ruenel,

I am wondering how it links to the incorrect urls.

It should have been www.stcreativedesign.com.au/#about or other ids. This is one of the reasons.

The url of each page is correct but not on the browser. I have followed the documentation you mentioned. since started.

What do you think to cause this incorrect url on the browser?

Thanks

[friech]

Hi @Symbiosis,

A couple of things here, please make sure you’re only using the ID link (e.g. #contact), no slashes, not an absolute link (https://yoursite.com#contact) on your one-page menu. Second, do not set your One Page Menu as the Primary Menu but only assign it to the intended page.

This means that you need to have another menu that will serve as the Primary Menu.

More details about one-page navigation

If the issue persists, please provide us login credentials in a secure note so we can take a closer look.

Cheers!

[Symbiosis]

Hi there,

I am just be able to work on the website today. Let me explain what I’ve done.

Setting menus: 2 different menus were set. One for One Page Navigation where the custom links to the #IDs. The other menu is the primary menu where the url links to the website see the attached setting.

Setting headers: your team recommended to set 2 different headers.
-One is for one page navigation, I assigned menu to the One page navigation menu;

• and the other I set as global header and links to the primary menu.

My present problem now is the url on the browser doesn’t match with the one I set on the primary menu.

Need your help, thanks.

[tristup]

Hi @Symbiosis,

I think there is some confusion with the One Page Navigation and Page Id.
Let me explain it to you, you are quite perfect in your menu setup with the specified id(s).
When you are specifying any id(s) with the URL that means browser will try to find that section in the same page.

So if you are using the One Page Navigation then the sections with the id(s) will be present in the same page where you set the menu.
The Contact Page, About Page and other pages are individual pages and that can be added to menu from your menu items.
And you don’t have to mention and id(s) to the URL.

Just keep it mind that if you are specifying any id(s) to the URL then the section with the id(s) should be present in the same page.

The article will help you to setup one page navigation.

Hope it helps.

Thanks

[Symbiosis]

Hi there,

Yes it is very confusing. I did One page navigation menu in one of my previous websites it perfectly worked well. Then I used X theme. But with Pro theme which I used for this website and following your team recommendations I need to set 2 different menus. It confuses me.

Quote
"What you need is to create two sets of menu. One menu is exclusive used for one page navigation. This is the menu where you insert the relative link or the #in-name as your menu item links.

For the second menu, this is the primary menu which means that you will have to insert absolute link or the https://example.com#id-name as your menu item link.

Now, if you are using Pro theme and have created a custom header, you need to duplicate your header. The first header will be for your one page navigation and the second header will be assigned as your global header. With this setup, you should now have a clue which menu you need to place in the correct header." Unquote

Now it works but not as a One page navigation as I want. Look forward to a good solution.

Thanks

[nabeel]

Hey @Symbiosis,

I checked your setup, the issue you’re having is that you’ve custom menu items in your one page navigation menu (About, Works and Contact) the sections with those IDs do not exist on your homepage, only #home exist. To make it work, please remove those custom links:

Add the actual menu items instead of custom links:

This way your one page navigation menu will work the way you want it. It will link to your external pages as well as link to your #home section.

Now for the other menu you’ve, you again add one custom link and that would be home with the absolute link https://example.com#home

This should work as expected. Let us know how this goes!

[Symbiosis]

Hi there,

Thanks. I’ve done in sections and all good now. Thanks for your support.

[friech]

You’re more than welcome, glad we could help.

Cheers!