Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1360619

    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?

    • This topic was modified 2 years, 2 months ago by Eleina_Shinn.
    #1360693

    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,
    Rikard

    #1360802

    Yes, 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?

    #1361044

    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,
    Ismael

    #1361057

    i 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)” )

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.