Canvas Support

Multiple pages with single navigation

6 replies · opened Aug 4, 2017

Sshawarma75Aug 4, 2017

Hi,

I can't deleted instructions on how to operate multiple pages. In particular, I would like a single navigation that populates all the pages and acts as if it was on each page as otherwise I would need to change all pages to update my primary nav. Is there some code somewhere that I can use?
Thanks!

Ggwroutt3Aug 4, 2017

I use PHP includes, but many code editors have features for this as well.

SSemicolon WebSTAFFAug 8, 2017

Hello,

This is Definitely Possible but you will need to have a Centralized File for the Menu and this can be achieved easily using PHP. Please use the following steps:

  1. Firstly, you will need to change the .html Extension of your files to .php .

  2. Secondly, create a File named menu.php and add the Menu Code to it.

  3. Then, include this file in the Primary Menu Area. Example:

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any issues.

Sshawarma75Aug 8, 2017

Thank you. I tried that but it seems to suppress my ability to use the "scroll to" javascript.
If I use the original text for menus e.g.,

  • <div>The conference</div>

then it links to the anchor index.php#

If I modify it to

  • <div>The conference</div>

Then I lose the scroll

Can you help?
Thanks

Sshawarma75Aug 8, 2017

Thank you. I tried that but it seems to suppress my ability to use the “scroll to” javascript.
If I use the original text for menus e.g.,
`

Can you help?
Thank you.

Sshawarma75Aug 8, 2017

Also, for some reason, I cannot edit my replies:

You do not have a License for Reply To: Multiple pages with single navigation to Add New Replies. Please Purchase or Renew your License.

SSemicolon WebSTAFFAug 9, 2017

Hello,

Please consider adding the Hash Location to href instead of data-href and then you will need to add some extra codes to make this work and align the Section properly based on the Sticky Header and Offset. Consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking: 

jQuery(document).ready( function(){
	setTimeout(function() {
		if (location.hash) {
			window.scrollTo(0, 0);
		}
	}, 1);
});

jQuery(window).on('load', function(){
	var divScrollToAnchor = window.location.hash;

	if( typeof divScrollToAnchor !== 'undefined' ) {
		var getOffset = $( divScrollToAnchor ).attr('data-offset');

		if( getOffset ) {
			scrollOffset = Number( getOffset );
		} else {
			scrollOffset = 70;
		}

		var t = setTimeout( function(){
			$('html,body').stop(true).animate({
				'scrollTop': $( divScrollToAnchor ).offset().top - scrollOffset
			}, 700, 'easeOutQuad');
		}, 1000);
	}
});

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard