Mega Menu/Anchor - Anchor needs two clicks to go to correct position

Foundry
1

Hello,

i have a one page website with mega menu with anchors, all is working well except the “CONTACT” anchor. When i click the menu point it scrolls down to the end of the “WORK” section and only if i click the second time it scrolls down to the correct position.

www.amazinglighting.design

Any Idea anybody?

Thank you,
Michael

2

Check if you named both anchors the same or if you have two anchors for contact by mistake. Perhaps in a visibility stack or so…

3

Thanks for your quick answer Fuellemann,

just double checked but i can´t find a second anchor. i actually set a section up when i started as a template and copied it to the next menu point and never put in additional anchors…

4

Then it might be because of the use of lazy load images. That happened to me. The anchor jumps to the point the contact section starts as if there was no image in place. Once the image is loaded, the jump fails to go to the correct place. Disable all lazy load functions and it should work.

1 Like
5

ok but is this a bug or a feature then :slight_smile:

i need the lazy images since otherwise my image show on the very top of the website takes ages to start since all those images down there are loaded also…is there any solution to this? can i delay sections of my webpage somehow?

6

Hi, it is the way the browsers work and I do not think this can be controlled by any stack or framework. Regarding the images: You have some .png images in the top section which are e. g. 5.1 Megabyte. Try only to use .jpg and compress them as you did with the others.

Next, you can add a compression order in the .htaccess file to make sure everything will be as quick as possible (works on an Apache Server only, but these are the most used from hosting companies):

# Compression with gzip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/shtml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
7

Neither. It is just the order of operations that is playing out that is causing you a headache. The jump to the anchor is immediate as it is performed by the browser itself, and not the code on your page. This means it is going to take place before your lazy load images could ever hope to load. Web design is definitely a give and take thing.

As for your image sizes – As @Fuellemann points out, you will want to make sure you sizing your images appropriately for the space they’ll take up as well as you’ll want to make sure you’re running them through a compression tool. Something like TinyPNG does a great job of this.

1 Like
8

thank you very much but that is beyond my horizon…so i need to paste everything into my htaccess file in rapidweaver?

9

thank you very much for making that clear for me and the tip with TinyPNG, i used to compress my files with affinity photo only plus i am sure i was a bit lazy but now i ran the worst ones through TinyPNG and changed them.

10

Just don’t use .png for the images. Just the ones you need transparency for like logos. Most of your images are already .jpg.

1 Like