Are anchor points related to each other

Report · Jun 10, 2020

Hi there. I have been working for days on what seems like a simple thing.

I have a menu at the top of the page it stays there when scrolling, when clicking the links in the menu it scrolls to anchors on the page, so far so simple. When checked on desktop its fine but on phones it scrolls up under the mnu and no matter where I put the anchor this is the behavior. Th eonly way I can fix it is to have large gaps between elements near to where the anchors are then it works well. BUt it looks naff.

I am just utterly confused as to how anchors behave in relation to each other, I though it was simply a case of placing an anchor on a page where to you want it to scroll to, but this is not what I am seeing at all.

Sorry I am not able to share the site, but I have read every forum post I can find on anchors but just dont know whats going wrong.

All of my elments fit within the tamplates boundries.

Its a fluid web site

It works ok in desktop view.

It does not work on phone.

Report · Jun 10, 2020

Anchor points must be set for every breakpoint. In your case this is quite difficult because fluid width breakpoints handle the whole content quite different to anchorpoints which stay in place instead of moving with the content.

There´s a way/workaround which I kind of learned from Guenter who may be come to this post as well, we will see.

Anyway, the only way to set an anchorpoint in a fluid layout is to copy and paste it into a textbox, because this textbox, which is of course not filled with text (but for better viewing where it is, should/could be spread to full width of your canvas) is managed as content which kind of reacts to browserwidth and floating of elements.

So your textbox, filled with the anchorpoint only, now should move with content - hope that helps.

Kind Regards,

Uwe

Report · Jun 10, 2020

Hi Uwe.

I think you understand my problem so this is a good thing, I thought I was going mad.

I tried your suggestion all that seems to do is cause a huge white space just before the anchor between it and the previous element on the page.

I have also been struggling with this all week as well.

Thank you for your suggestion. What I notice is as long as I leave around an inch of gap between the above element the anchor and the belwo element then it works, but I have to suffer this ugly gap. If I bring the elements close together and move the anchor up, then it will not work, I either get a really huga gap, i.e. scrool for ages or the page scrolls under the menu.

I shall keep fighting on.

Report · Jun 10, 2020

Why don`t you create a new page/site with just one page, place three to four elements/placeholders on it with your menu and anchors save it AND share it here via CC, dropbpx or similar file sharing.

I need a .muse file to see your issue. As I tried it at that time, I got the advice (through another thread) it worked pretty well.

I cannot do it until Friday as I am on my way to some locations but as soon as I´m back I can check.

Maybe, if you are lucky enough, Guenter chimes in before …

Kind Regards,

Uwe

Report · Jun 10, 2020

Is the problem caused by fixed navigation? If so, that should be easy to remedy with one line of custom CSS code inside a media query.

Open the page in Design mode.
Click Page > Page Properties > Metadata
Look for the section “HTML for <head>”

Add this to the <head> tag.

<style>
/** Special Rules for mobiles**/
/** Adjust values as needed**/
@media only screen and (max-width: 799px) {
  body {padding-top: 55px}
}
</style>

Post back if you have any questions.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jun 10, 2020

Thanks for this nacey I'll give it a shot when I am next at it. I guess this is telling the site to effectively end scrolling at the base of the nav rather than the top of the page?

Report · Jun 10, 2020

OK I tried this it does not apopear to have any influence at all. I tried adjusting the numbers even to silly amount with no effect at all.

The menu nav is the basic horizontal one from the panel. set up to nav to each of the anchors.

Everything after the first anchor has this behavior of putting that part of the page under the menu which is pinned to top and above everything. I can under stand this behaviour if the anchor was placed exactly atr the point of the page I want. But its not, I am placing it above where I want to compensate.

But, and here is whats blowiung my mind, no matter how far I move that anchor. The page will always nav to exactly the same point. EXACTLY.

So I am thinking, well maybe I need to clear the cache on my phone, but no, this has no effect.

The only way to efgfect where the page scrolls is to have a large gap between two SVG elements which are on the page.

This is upsertting me so much I am going to reproduce with no comercial content and upload perhaps omeone can take a look?

Report · Jun 11, 2020

Ok here it is a very quick and very rough website but the set up is in principle the same

https://we.tl/t-bq7QIeNSTr

This real website is very simple, its actually a food menu. Because the food menu has icons etc in the description, and the font is not a web font, I could not simply do it as text plus I would need tables etc and that just looked like a terrific amount of work in muse.

So my flow has been to create the menus in indesign add icons etc, save this as CC libraries and Alt drag into illustrator. Here I am creating outlines of the text and exporting as SVG.

The reason for the SVG is, its the only way I could seem to get lovely crisp text at all sizes, every other method I tried, png etc resulted in poor quality. I need it to scale for those big ol iphones as well as small devices and larger tablets etc.

So the layout I think is dead simple, a block of food menu, say breakfast (The coloured blocks in my example) with an corrosponding anchor. Click relevant Nav Menu item it takes you to that area. (The first three white squares are working in nav, these would actually be SVG icons)

But this does not work properly, and it varies depending on res of device. The anchors if anything seem to prevent blocks staying together resulting in either a huge gap of white or the refusal to scroll to the right point in the page., The only fix is to space the elements (Coloured blocks in this case) out with about an inch gap then it works, but with the problem of intentional ugly white gaps.

I have tried everything, pinning those blocks with every option there, only responsive width, no size change at all, fluid movement on page, putting anchors in text boxes, moving those anchors one million times inside the area outside the area, in their own layers etc etc. I have been at this simple sticking point for an entire day when I should have been getting on creating the lovely content!

The 'jump to top' widget is not the issue, problem existed before it was put in.

Any help very much appriciated!

The main thing here is the site has to be on one page and navicable.

Report · Jun 12, 2020

Number One: The "text" with inserted anchor must be placed right below/under the frame to follow in a way that it touches the frame to follw.

Number two: your red frame shouldn´t be an image frame but a normal frame (like in my example) with no svg inserted (for some reason that occured as an issue in my case). Like this you could place the anchor in the correct position - note that the anchor tries to reach the top left corner of the canvas and so it must be placed 181 px above the content that needs to be shown on the browser window.

I tried to group and it that did not funtion well in my case - hopefully Guenter chimes in here too if he still works in the muse forum and provides some additional help.

https://shared-assets.adobe.com/link/b4c61a89-181c-4d94-4992-4f7eb9eed6ea

Kind Regards,

Uwe

Report · Jun 13, 2020

Hi there. Sorry I dont know what you mean about number two. That red box has to be a SVG its the next part of the food menu, I cannot have a giant gap there?

Thank you for taking a look. I see your text box works so I will try and do the same, might even just copy yours!

Report · Jun 13, 2020

To let the BLUE TOP appear at the correct location, the anchor - in our case inside the textframe - has to be placed way above the blue frame - in your case - the header is about 181 px in height. I just coloured the textframe to make it visible for you. That textframe in my case follows the red frame as expected.

If you need to use NUMBER ONE for design reasons you must leave some space below your frames befor the next one appears in the correct position (181 px).

Does this help and clear it out for you?

Kind Regards,

Uwe

Adobe Community

Are anchor points related to each other