-
Posts
-
Hi, I have a site where 6 boxes have links on the home page that link to certain color sections with anchor IDs on another page of the site:
Links are here on home page: https://lulaandfloraskitchenrental.com/
Color Section IDs for each link are on this page: https://lulaandfloraskitchenrental.com/kitchen-namesakes/The links on the home page can be found at the bottom of the page, with the 6 boxes, each one says “Learn More About – name of kitchen”. Screenshot here: https://nimb.ws/r0uYF1
The problem is that, even though the links land approximately in that section, they don’t land at the top of the color section. They instead land just below the title of the section, so down too low where you can’t see the whole section. Here is a screenshot: https://nimb.ws/r0uYF1
Could you help with this – my only guess is that it has something to do with the sticky header? I will provide login credentials to the site because I have a coming soon page up, but I also have a bypass link which may work for you to assess: https://lulaandfloraskitchenrental.com/bypass
PS: I actually just “un-sticked” the top bar, which helped, it’s not as bad. The links where the text is smaller and in the middle look just find, just the photos get cut off, so some work and some don’t because of the length of the content. If they all landed exactly at the top of the color section it would work. The sticky header is 141 px – I wonder if css could drop the anchor links down by 141 px, would that work?
Hey Eleina,
This is what I see on my end: https://snipboard.io/5XPHn1.jpg. I’m not sure how to reproduce the problem you are seeing on your end?
Best regards,
RikardYes, Lula’s is the best looking. and it doesn’t seem as bad now (I removed the top bar from the sticky menu, which helps). It looks like the others are better now too, just the top of the pics getting cut off on some. Is there a way to have these anchor links land about 50 or 100 px higher, to make up for the sticky header?
Hi,
Thank you for the update.
The filter below should increase the scroll offset and adjust the position where the anchor links land.
function avf_header_setting_filter_mod($header) { if(!wp_is_mobile()) { $header['header_scroll_offset'] = $header['header_scroll_offset'] - 100; } return $header; } add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);Based on our adjustments, the anchor should land 100px higher than normal. Please add the code in the functions.php file.
Best regards,
Ismaeli do sometimes prefer that nice plugin: page scroll to id
This plugin has one big advantage – you can insert an ID – where scrolling stops ( f.e.: #header )
but for me it is more important because this works even on scroll to ID on different pages. – That means : if i have a link on page1 to an anchor on page2 it will do a smooth scroll to that position by opening first the #top position and on a little delay ( you can determine how long this is ) it will scroll then to the anchor smoothly. ( “Scroll from/to different pages (i.e. scroll to target when page loads)” )
- You must be logged in to reply to this topic.