jy15

@tuanphan Hello, I am trying to apply a similar layout to my site (changing 4 columns to 2 on specifically portrait-tablet view) while retaining the "Capabilities" drop-downs stacked correctly under each section. Would you be able to advice on what the CSS would be for that? redbarrelcreative.com [Services Section] Thank you!

Hello, I am attempting this method also but also seeing that my duplicate nav links are not disappearing, any tricks to get this to work? (I am currently using a 7.1 site) Thank you.

Hello, I am still having trouble getting this working myself. Did you add the above to the footer in combination with the large block of code at the top of the thread to the header? Thanks, Joey Derrico

Unfortunately no luck, still seeing the same issue.

Hello, I wanted to see if this solution was posted somewhere as I am running into the same issue. Thanks!

I have not yet unfortunately. So you're able to get smooth scrolling anchor links in Safari without forcing a page refresh? This setup above is working for me in Chrome - weird.

Hello, I have spent a good amount of time digging through multiple threads/forums regarding anchor links in 7.1 sites and wanted to summarize what I have working, and what issues I am seeing. RedBarrelCreative.com My setup: Currently I am using code inject blocks to create div tags for header site navigation anchor links. Example: <div id="about" class="anchor-offset-about"></div> Header nav links are written as follows: /home#about The class is so I can create a manual offset for both desktop and mobile jumps to display in the exact spot I want. Example: //desktop// .anchor-offset-about { position: relative; top:0px; } //mobile// @media(max-width:767px) { .anchor-offset-about { position: relative; top:100px; } } Smoothing scrolling is enabled via: html { --scroll-behavior: smooth; scroll-behavior: smooth; } Smooth scrolling on Safari specifically is enabled via: (site-wide header injection) <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script> <script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script> -- This setup IS WORKING correctly. HOWEVER, I am running into some weird glitches across different viewing formats. 1. Chrome - Everything is working properly. Aside from the random anchor link not landing exactly correctly (very rare) this all works. 2. Safari -Upon landing on the home page for the first time, every anchor link appears to force a page refresh and jump to the anchor point without smooth scrolling. After this completes, anchor links will work properly and smooth scroll between them. I am still looking for a solution to this. There are the two options I have tried without success. 1. Force the home page to load at #top. This is not a viable solution, however, as it will work on the very first page load/visit. But if I visit another page on my site that is not the home page, and try to return to one of my anchor links from the header navigation it will force a page load to the top again and not jump to the correct location. 2. Purchased squareaddons.com Anchor Links product. This will solve the problem on desktop, however, I am unable to set class specific adjustments, so anchor link jumps do not land correctly on mobile. I have submitted a ticket to them to ask about this. 3. Mobile (Safari and Chrome on iOS - both iPhone and iPad) -Similar to above, page refresh occurs on first click of any header nav link after landing on home page. Scrolling will work after this. The main other problem on mobile only is that my site header, which is both fixed and using the "dynamic" setting in Squarespace 7.1 is not loading properly when using any anchor link for the first time. It jumps to the right location, but is transparent, showing content underneath where it should be a solid color (white in my case). If I start scrolling or click the anchor link again it will display properly, but makes for a very messy first-time viewing experience. And advice or solutions to these issues would be greatly appreciated. Thank you!

Hello @rwp - is that code still available? Thanks,