Tab Bar - Scrolling not accurate


#1

I’ve basically finished converting this website from MUSE land. However if you click on any of the three tabs, it scrolls past the intended target. In blocs there doesn’t seem to be ‘anchors’, you set the scroll to a properly ID’d bloc. I’ve done this and labeled it correctly, but in all three browsers and, on laptop, iPad and iPhone, it always overshoots. Any guidance most helpful.

http://beyondtheseastudio.com

Good day
Ron


#2

The easiest way to deal with this issue is to increase the padding on your blocs - maybe large 100px or more.


#3

Hello Hendon,

Thanks. Changing from 20px pad to a 50px pad solved the issue. Would be nice if the “anchor” was based from the top of the bloc, instead of the middle or the bottom.

Good day
Rono


#4

Hey @RonObvious, that was the easiest way to get what you want, but there is an underlying problem. The anchors do work as you’d expect, but on your site there is an small issue.

There is padding being modified at the top of the .page-container element.

.page-container has an inline style padding-top: 103px; this should match up with the height of the browser in a fixed browser situation. Changing that to 147px gets you there but I didn’t have the time to determine cause of this. Did you add this inline style manually? If not, maybe you changed the navigation height in a way that blocks could not account for the proper adjustment.

…either way they really do line up as expected.

hope this helps.