Canvas Support

Help with data-href navigation positioning on a one-page site

9 replies · opened Apr 29, 2019

AaguyowensApr 29, 2019

I am not sure how to properly describe the issue so I must apologize in advance for any confusion.

Instead of using the primary-menu ul/il menu elements as a drop down menu, I wanted to use said elements to scroll up or down the page to a section with a referenced ID tag:


	
- [Reel](#header)
	
- [Frames](#frames)
	
- [Bio](#bio)
	
- [Contact](#myModal1)

The animation and navigation works; however, the top position of the view does not start with the top margin of the tagged element. The attached image "scrollerExample1" is the initial view when the site is booted (from my local server; it is not live yet). Notice the "FRAMES" title-page text element near the bottom of the view. That "FRAMES" text element is one of the referenced/tagged elements in question. The attached imaged "afterFramesClicked" is the current view after clicking/toggling the "FRAMES" primary-menu menu item element. The "FRAMES" text element is being cut from the current view. The top margin of the title-page "FRAMES" element needs to be at the top of the view as shown in the attached image "desiredView."

I hope this was too confusing and that a solution isn't too much for your team considering the amount of questions you receive. Thanks for your help and service!

P.S.: I will send the last attachment in a different message on this feed. Thanks!

AaguyowensApr 29, 2019

The afterFramesClicked & desiredView image.

Sorry about the previous PNG upload.

SSemicolon WebSTAFFApr 30, 2019

Hello,

Thank You so much for the Explanation! While everything should work in the way you have explained, however, can you please provide us with a Live URL so that we can understand issue in a better way and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

AaguyowensMay 3, 2019

nathanielwrightdp.com

SSemicolon WebSTAFFMay 3, 2019

Hello,

We have checked out your Website and the issue is that the Sections are hidden behind the Sticky Menu which is causing this effect. You will need to use the One Page or the Link Scroller functionality so that the Sections are properly displayed. Consider using data-scrollto="#section" on the Menu Links.

This will definitely work fine. Hope this Helps!

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

AaguyowensMay 6, 2019

I must apologize for not completely understanding. Am I calling the One-Page or Link-Scroller class in my Header tag? I did use the data-scrollto="#section" for my Section tags; however, the view is now displayed approximately 40-60px above the Page-Title section, intersecting with the previous section.

Thank you for your prompt support and patience!

AaguyowensMay 6, 2019

And I have four last things I need answered; two of which I can't seem to debug. May I ask them in this thread or should I make a separate thread?

SSemicolon WebSTAFFMay 7, 2019

Hello,

  1. In this case, simply use the data-offset="0" Attribute and change the Value of 0 to where you want the Page Section (usually 80 or 100) to stop when you Click on the link.

  2. It would be great if you Open separate topics for them as it would be easier for other users to search for them on the Forums.

Hope this Helps!

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

AaguyowensMay 15, 2019

Sorry for the delay of my reply. I finally got an opportunity to implement the data-offset attribute with the value of 100 and it works but there's an issue when I scroll down and triggering the stick-header minimization transition from 100px to 60px. The data-offset attribute seems to process the change and the data-scrollto attribute places the view 40px above the designated section. I tested this by setting the data-offset value to 60 and, after scrolling down to trigger the minimization animation, the view was placed in the correct spot. Here's the code as your reference. Again, thank you son very much for your help and patience.


	
		
- Reel
		
- Frames
		
- Bio
		
- [Contact](#myModal1)
SSemicolon WebSTAFFMay 16, 2019

Hello,

Really Glad that your issues were resolved. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

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