Menu anchor is scrolling too far

I came here with exactly the same problem. It does appear that the problem is worse on desktop than mobile.

I’ve tried to manually install a tag with no luck at all.

A solution would REALLY be appreciated.

Steve

Hello,

If you access directly to the url it happens because of the admin bar.
if you use the link from wordpress menu it will work ok.

Thanks yehudah, but it is more than the admin bar that it is off; more like 100 px. I will do some more experimenting and get back ??

Any news with this ?

Hi yehudah,

Unfortunately, it is still scrolling too far.

Here is a bit more detailed description that you could try to see what I mean:
– on a new page, insert your Homepage – Restaurant template
– add a Menu Anchor to the Our Sweets Collection section; the highest one can place it is above the Our Sweets Collection Heading module
– add a button above the Coffee & More logo at the top of the page and set it to scroll to that menu anchor
– for me, it scrolls to the top of the Our Sweets Collection text, or about 90px too far.

Cheers!
Lyle

Unfortunately, if you try to adjust it, it messes up the mobile versions.

Works OK for me. https://mikegriffin.me/testbed/anchor-test/. Maybe I set it up differently? I tried to reporduce @lyle’s instructions.

== Server Environment ==
Operating System: Linux
Software: Apache
MySQL version: 5.5.32
PHP Version: 5.6.25
PHP Max Input Vars: 1000
PHP Max Post Size: 128M
GD Installed: Yes

== WordPress Environment ==
Version: 4.6
Site URL: https://mikegriffin.me/testbed
Home URL: https://mikegriffin.me/testbed
WP Multisite: No
Max Upload Size: 128 MB
Memory limit: 40M
Permalink Structure: /%postname%/
Language: en-US
Timezone: 0
Admin Email: [email protected]
Debug Mode: Inactive

== Theme ==
Name: GeneratePress
Version: 1.3.39
Author: Tom Usborne
Child Theme: No

== User ==
WP Profile lang: en_US
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

== Active Plugins ==
Elementor
Name: Elementor
Version: 0.7.4
Author: Elementor.com

@mikegriffinn – that’s the same as my test as well and as I mentioned, it’s about 90px too far; the desired location would be to the very top of that section (top of the black) as that is how Beaver Builder, for example, works.

I noticed too that your Back to Top doesn’t go all the way to the Top top ??

Now one can always add the Page Scroll to ID plugin where you can add an offset to the scroll location, but it would be nice to be able to do so without using it.

Cheers!
Lyle

@learnwpbasics

see here:
Test

@yehudah –

Yes, but even in your example, it is not scrolling far enough ?? There is a big gap between where the scroll ends and where the content begins.

For this type of display, the link should scroll to the very top of the section.

Check out this example of a one page site where the desired functionality is displayed: https://www.cfwzz.ca

Mind you, this is using the Page Scroll to ID plugin where one can offset the scroll location as well as provide the menu item highlighting.

UPDATE:

Figured out a real easy solution to scroll to an exact location. As I am using !important to make this work, I am obviously not targeting the correct selector, but it works and doesn’t mess up on mobile ??

– in the Advanced tab on the Menu Anchor module, give it a Class Name
– I used this CSS to control where it scrolls to:

.myanchor {
    margin-bottom: 40px !important;
}

Adjust the bottom margin as required ??

Cheers!
Lyle

I found a solution. All you have to do is add 25 pixels of padding to the top of your title element. That solved it for me. Either that or the theme I was using before wasn’t working ??