Jump to content

Sticky sidebar with anchor link navigation in Jasper Jin (7.0)

Go to solution Solved by tuanphan,

Recommended Posts

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!

Link to comment
  • Solution

For anyone interested, just add a Code Block on Page >> Paste this code

<ul class="tp-float-buttons">
        <li><a href="#">Education</a></li>
        <li><a href="#">Record</a></li>
        <li><a href="#">Awards</a></li>
</ul>
<style>
ul.tp-float-buttons {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 999;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
ul.tp-float-buttons a {
    color: white;
    background-color: black;
    padding: 10px;
    margin-bottom: 10px !important;
    display: inline-block;
    min-width: 100px;
    text-align: center;
}
</style>

Or you can add a Text Block >> Add links >> Then share url, we will give the code to adjust it

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 4/5/2022 at 3:13 AM, tuanphan said:

For anyone interested, just add a Code Block on Page >> Paste this code

<ul class="tp-float-buttons">
        <li><a href="#">Education</a></li>
        <li><a href="#">Record</a></li>
        <li><a href="#">Awards</a></li>
</ul>
<style>
ul.tp-float-buttons {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 999;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
ul.tp-float-buttons a {
    color: white;
    background-color: black;
    padding: 10px;
    margin-bottom: 10px !important;
    display: inline-block;
    min-width: 100px;
    text-align: center;
}
</style>

Or you can add a Text Block >> Add links >> Then share url, we will give the code to adjust it

Hummm.. this sounds like a neat idea but this code is not working for me on the Bryant template 7.0. Thoughts? 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.