Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'anchor'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://courtneykellywrites.com Hello! I am completely baffled-- the anchor links that I use in my top nav to create a single scroll website with Squarespace 7.1 are jumping to the wrong sections of my site on mobile. They work perfectly on desktop, but on mobile, the links to latter parts of my page are off by as much as 1,000px. Can anyone help me figure out what's going on? Thank you so much in advance!
  2. Hello, I have a page with many 'large', full-screen sections. I would like to change the scrolling so that the page does not scroll like usual, but instead just jumps to the next section, almost like a presentation; the page should not move except when 'jumping' to the next section which fills the page. I have seen this effect before, but cannot for the life of me find what it is called, and thus how to reproduce this effect. It is similar to the Carousel Banners in 7.1, but horizontal and controlled by scrolling down the page. I appreciate any advice or directions you can give. - Clueless2000
  3. Hello! Squarekicker extension installed here. And, I have this point of massive frustration as I don't know how to move forward. Can you PLEASE help me? I made a sticky split with multiple sections, anchored to a text section. Whenever I go down on the list, the page scrolls to the anchored section, but whenever I try to go up on the list, the scroll doesn't work and I'm stuck on the anchor I last chose. - it's also used in combination with sticky blocks so the sections overlap - I don't know if there's a problem over there - but it seems to work fine overall and I can't understand why it's jamming on the way up. It makes more sense when you try it out: website: https://alexcoman.squarespace.com/work/commercial password: parola1 Massive thanks !!!!!!!!!!!!!!!!!! forever grateful
  4. Site URL: http://www.forestchaffee.com/japan hello, i am trying to link to a newsletter form on a page. i added a code block with this code above the area where i want the link to take people: <div id=”newsletter”></div> but when i make the link the rest of the sections of the page are gone, the page's banner image is a sliver of the full height, and it's taking the viewer to the top of the "about us" section instead of the bottom of the "about us" section. http://www.forestchaffee.com/japan-about-us#newsletter can this be fixed? thank you!
  5. Site URL: https://www.nashconsulting.com/workshops Is it possible to have multiple buttons (used to navigate to anchors on the same page) floating as one scrolls down the page. The page I am working on is https://www.nashconsulting.com/workshops - would like to buttons on the right to float along as website visitor reads down the page. I realize I may need to change the position of the buttons or the format of the page as the buttons might obscure the text under them?
  6. Site URL: https://lenexis-foodworks.squarespace.com/ https://lenexis-foodworks.squarespace.com/ pw: lenexis. I have created anchor links in navigation (about, order here, brands etc.) They jump fine when operated from the homepage. But when I click on "Inquire Now" in the navigation, which is another page, I'm unable to go back to any of those sections from this new page and the only clickable navigation title is the home title which is the main page I've designed. Can someone help shed some light on this please as this is my first time using anchor links. Thanks.
  7. Site URL: https://www.hannahpark.work/pagecv-1 Hi, I would like to add a sticky section for anchor links to a long CV page. There are multiple sections (Education, academic record, etc.) in my one-page CV page, I want to have a section with sticky navigation links that will jump to these sections within the page. My website: https://www.hannahpark.work/pagecv-1 Password: 2022 I'm using Jasper Jin and Squarespace version 7.0 I saw that you might be able to do this with Brine template but I would rather not have to change my template. Thank you!
  8. Site URL: https://cardcastle.co Hello 🙂 My website has items in the navigation bar that link to sections of another page (the Book a Demo, Features, Pricing and ROI items in the CardBot nav folder). When I'm editing the site on Squarespace, clicking those links takes me to the CardBot page and jumps to the relevant section. However, when I'm browsing the site normally, clicking those links only goes to the CardBot page (but doesn't jump down to the relevant section). If I'm already on the CardBot page, clicking the links in the nav bar will work properly and jump down to the section. Is there anything I can do to make sure those anchor links work as expected?
  9. Anchor links or page jumps are a vital component to any website, but specifically important for those websites that are text-heavy or have a lot of content on a single page. In essence, an anchor link is a special URL that takes you to a specific place on a page. They’re useful for letting your visitors skip to the parts of your content that interest them, and they’re a great organizational device that aids readability. As an added bonus, they help with SEO too. In Squarespace, there are two types of anchor links you can use, depending on the version of our platform you’re using. For example, if your site is on the Squarespace 7.0 platform, you can create anchor links on Index Pages using the steps in the guide Adding index page anchor links. If your site is on the 7.1 version, you can add a small custom code snippet and create an anchor link on Layout Pages. Check out our guide Creating anchor links. Before stuffing your Main Navigation with anchor links, there are some considerations you need to take into account. For example, too many items in your navigation can be aesthetically overwhelming and become a hindrance to readers. Links that are too close together can be a problem on mobile, specifically for visitors with limited hand mobility. How do you use anchor links on your website? Do you have any special practices or tricks? Let us know in the comments below!
  10. 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!
  11. Site URL: https://www.stevenwrites.co.uk Pretty much as the title asks - and if it is possible, how should I go about it?
  12. Site URL: https://objekts.squarespace.com/?password=demo Hello! My anchor link is in the nav and I would like it to have the same active state as the other navs when it is clicked. I kinda figured it out using the class ".homepage" since the anchor link is in the homepage, but the active state is always on and I want it to be on only when clicked. I think javascript would be ideal for this problem. The script would read the title and if it has "#" in the url then the active class would show, and if not, the active class would be removed. I'm not super great with javascript and would appreciate any help with this! Thanks in advance!
  13. Hi I create two section one for the mobile and one for the desktop apply the same id on both section but the problem is when I click on link on menu which is linked to that section is not working on mobile what should I do ?
  14. Site URL: https://www.jaarverslag2021.willemen.be/operational-excellence I have created 3 buttons (iso, bim, lean) with well working anchor links, however, all of these created links are jumping too far. What can i do about this?
  15. Site URL: https://share.squarespace.com/llu09mqo Hi, you probably may not be able to click on my personal page as this is still a config page. Thats why i pasted a video capture from squarespace, as they redirected me here to this forum. You can see the just one time click behavior. The code wasnt done by me. Its a template i purchased here: https://denizencoruolan.squarespace.com/#about-me It behaves sleek with every click and goes to the same anchor link even after a scrolling. However i recently noticed that my anchor links work only one time per page. Scrolling and clicking the same anchor will not call the anchor. And i hope this may be occuring because im still on a config page yet and not live maybe? Appreciate any help! p.s. i dont know if that is helpful, that is what is in css header a { background-image: none !important; } .pdp-layout-wrap-around .pdp-form-wrapper { padding:4em; } .pdp-layout .pdp-details .variant-option select, .pdp-layout .pdp-details .product-quantity-input input { border-color:#eee; } .pdp-layout .pdp-details .product-quantity-input input, .pdp-layout .pdp-details .variant-select-wrapper { border-color:#eee; } .pdp-layout .pdp-details .sqs-add-to-cart-button { font-size:0.9rem; padding:1.25rem; } .pdp-form-wrapper .ProductItem-nav-breadcrumb { font-size:0.9rem; } .product-price { letter-spacing:0.2em; font-size:0.9rem; } .light .sqs-block-image .design-layout-overlap .image-title *{ background: none; box-shadow: none; } .user-items-list-item-container.user-items-list-simple[data-title-font-unit="rem"] .list-item-content__title { font-size: 0.9rem; } // Vertical Navigation // #wm-subnav .header-nav-wrapper { width: 135vh !important; padding: 65px; position: fixed; background:transparent!important; -webkit-transform:rotate(-90deg)translateX(-85%); -webkit-transform-origin: top left; left: 0px; top: 0px; text-align: center; z-index: 999; } body.tweak-subnav-position-top #wm-subnav a { color:#666; } body.tweak-subnav-position-top #wm-subnav { background:transparent; } h3 { font-family: adobe-handwriting-ernie; }
  16. Site URL: https://bsafe.best/features Hi! I'm having an issue with multiple sites where the navigation bar has on-page anchor links that smooth-scroll to various sections. When the user clicks it - regardless of mobile or desktop - the page scrolls past the heading into the body of the section. I've tried using #page-section-pagesectionnumber and #custom ID as anchors with the same result. This is the smooth scroll code I'm using: ///SMOOTH SCROLL/// html { scroll-behavior: smooth; } Password is bSafe. Note: the fixed-position header appears to be the culprit. Is there a way around it?
  17. Site URL: http://www.vivasocial.io Hello, I am using a 7.1 template for my website vivasocial.io I want to add anchor links to the navigation menu at the top. I am unable to do this. I have tried multiple ways however they all end up with the necessity of adding a # into the page slug. It's not possible to add a # to the page slug to complete the anchor page. Can someone please help me achieve my dreams? Do I need to code and get the commerce version for this? Or am I missing something? Please any solution is appreciated Thank you in advanced
  18. Site URL: https://www.edibleaudio.co.za/ Hi, I am using the page section code to create anchor links but it doesn't seem to be working. I am adding the following text (for example) to the link field: #page-section-627a245add445f6d5442c552 I've also tried to test the links with the live site but still no luck. I'd rather not use the code blocks for anchor links, so any suggestions to make this page section method work? Thanks
  19. Site URL: https://icosahedron-banjo-ybsd.squarespace.com I have a contact area in the footer of a website I am developing. I created a link in the top navigation that links to a div in the footer with the id of #contact. The anchor link works, but if the first element of that area has animation on it, like fading it, the anchor jump does not initiate the animation. Users would just see a blank area. The only solution I've found so far is to cut animation off. Also, is animating a fade in on every section default in 7.1 and if so, is there a way to kill it. I'm not talking about lazy loading, but the animation effect itself. Sorry I can't show the site at this time because it is under development. Thanks.
  20. Site URL: http://www.genesistutoring.ca I'd like to create an "About Us" index page that includes sections for things like "our philosophy", "our team", "our space", etc. I made a folder in my primary navigation called "About Us", and made the elements of the folder Our Philosophy, Our Team, and Our space. In a perfect world, I'd like the folder title (About Us) to link to the top of the About Us index page, as opposed to the first option in the folder's drop down. I think I found a way to do this through custom CSS. The main thing I want is for the individual items in the folder to anchor link to the right area of the About Us index. So far, my anchor links that I've tried to set up work well when I'm already on the About Us page, but when I'm on the homepage, the anchor links in the folder just lead to the first page of the folder.
  21. I'm trying to anchor a vertical line to the left of my headers so that they are responsive - does anyone know if this is possible? So far, I've created a verticle line using CSS but am struggling to align it to the baseline of the text and to 'anchor' it to the text so that when viewed on mobile they stay together and be above the body copy. Currently, when you view at mobile size the header falls below all content and falls off the left of the page (because I reduced the padding to bring the copy closer to the line), and the line is above the header. (2nd screenshot) Have attached a screenshot of what I've managed to do so far. Thanks so much in advance!
  22. Site URL: https://edu.ifixit.com/fast-fix-project-faq#two I added anchor links to my accordion menu using the markdown block and some CSS and jQuery, but I would like the question to expand automatically when the anchor links are used. The rest of the page functions just how I would like—users that end up on the page organically can toggle through each question—but when I send a specific anchor link to a user, I'd like the question to automatically expand. I'd ideally like to find a way to do this that also doesn't mess with the spacing or the hover color. I'm using Squarespace 7.0 with the Bedford template.
  23. Site URL: https://www.cuirimsportsrecovery.com/services/ I've added anchor tags like what is described in the article attached. The tags are not jumping to where they should be on the page, just staying put. Can anyone help fix this issue?
  24. Site URL: https://www.theenrichededucator.com/our-services Hi, I'm wondering if it is possible to hide/mask the anchor links url in the address bar ? I have a few anchor links throughout my site and when a visitor clicks on the anchor link to scroll to another page in the index, the url in the address bar changes to the anchor link's url. I'd like the address bar url to remain the same. For example, as seen in the screenshots below, on my services page, a visitor can click the "Coaching & Development" anchor link to scroll to that section. Once clicked, I'd like the url in the address bar to still say "https://www.theenrichededucator.com/our-services" and not "https://www.theenrichededucator.com/our-services#coaching-home" Picture 1. Hovering over the anchor link Picture 2. After clicking the anchor link
  25. Site URL: https://www.cainla.com/ Hey guys! Quick question if anyone has an answer. I have a site that has an index page as the main navigation. Reason being is because I have other titles and pages underneath that I want on one page. I am on 7.0 the Brine Mojave template so you can see what I mean about the multiple pages. I want to have those multiple pages under the index page on the main navigation as well so when you click on "Listen" or "Features" it drops you right on that area of the one page. I have spoken to squarespace already so I know within their site it isn't doable but I am hoping with some custom coding we might be able to make it work. Any help is greatly appreciated! I will attach some files as well so you can see.
  • Create New...