Jump to content

mtaddict

Circle Member
  • Posts

    18
  • Joined

  • Last visited

Posts posted by mtaddict

  1. On 10/5/2020 at 9:49 PM, fatcatdesign said:

    Hi @mtaddict

    I believe I have a solution. Try this:

    You'll need to add custom css code, but it's fairly simple to do.

    I'm normally a Wordpress designer where I've used variations of this solution. I tested this solution on a demo SS site and it seems to be working thus far.

    ------------------

    First, for those who haven't already, they'll need to add the anchor tags/links using IDs to the sections.
    To do this, you need to add anchor tags/links using IDs to the sections on the page as follows:
    https://fatcat.agency/squarespace-adding-anchor-links-using-IDs

    • Go to the section you want to hyperlink to;
    • Hover over the top of the section
    • Look for the horizontal teardrop, and click on it.
    • Search for html
    • Click on code
    • Wipe out the sample code
    • Enter your code as follows:
    
    <a id="name-of-your-section"></a>
    • where name-of-your-section is replaced by your section name.
    • No spaces, no underscores, all lowercase.
    • Save.
    • Next, you'll want to add the section as a link to your navigation (or wherever you wish).
    • Add the option of "link" and use the following as the hyperlink:
    
    #name-of-your-section
    • where you name-of-your-section is replaced by your section name, preceded by the pound sign.

    Request to the SquareSpace improvement team: Is there to add custom IDs to each section? This is a basic feature even of Weebly, and it would make the process even easier to implement, and since SS is targeting web designers as well as DIY-ers, it makes sense to have this as a feature. If it's in place, please advise.

    -------------------------------  

    Next, how to offset the anchor links to accommodate the height of your header:

    If you look at the link provided, there is CSS code as follows:

    
    :target:before {
    content:"";
    display:block;
    height:90px; /* fixed header height*/
    margin:-90px 0 0; /* negative fixed header height */
    }

    Depending upon the height of your header (including any above-header you may have), you'll want to adjust the px height and negative margin height.

    So, you'll want to add the code to custom CSS, with those numbers adjusted. I've created a screencast showing you how:

    https://fatcat.agency/squarespace-offset-hyperlinks-for-header-height

    • Go to Design mode
    • Click on Custom CSS
    • Copy the code noted above to a text editor, then paste it into the Custom CSS field.
    • Save.
    • Test the result.
    • If you need to adjust the height, you will want to change the px height in both lines of code. For example, in my demo I changed 90px to 120px, for both height and margin, like so:

    height:120px; /* fixed header height*/
    margin:-120px 0 0; /* negative fixed header height */

    • This number will vary, depending upon the height of your header. 
    • Be sure to ONLY change the number; leave the px and the rest of the code in place. Do not remove the minus symbol from the margin setting.

     



     

    Doesn't work... sorry...

  2. Site URL: https://bisourouen.fr

    (password: lachose)

    Hi,

    I'm using anchor links on all my pages, but due to the header/nav bar being fixed, the top part of any page (from where anchor link jumps to) is hidden beneath the header/nav bar. So I would like any anchor links to point to the top of any page.

    I'm using anchor links like this: url with # to the slug url of any page.

    Any suggestions for how to change this please? Website isn't public yet and using the Version 7.0- famille Brine (template Basilic).

    Thanks

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.