Adding sticky sidebar with anchor link navigation

I'd like to add a sticky sidebar with anchor link navigation to one of the pages on my site, exactly like the "Navigate This Post" sidebar on this site:

https://thirtyeightvisuals.com/blog/free-squarespace-plugins-meet-ghost#mgfsp-anchor-08

What's the best way to go about adding this?

They added Markdown Block in post + this CSS (Home > Design > Custom CSS)

.markdown-block .sqs-block-content {
    background-color: #fafafa;
    border: 3px solid #191717;
    box-shadow: 5px 5px 0 #f09;
    box-sizing: border-box;
    padding: 20px;
    position: sticky;
    position: -webkit-sticky;
    top: 100px;
}

Is there a way to do this for a site's main navigation menu without a plugin?

The Version 7 template "Supply" is the closest I've come, but that template requires a sidebar on the right side of the site as well. None of the other V7 templates allow a sidebar with its own background color. "Wells" looks nice, but I wish I could change its color from White to something else.

I just need sidebar navigation on the left, and the rest of the site to fill the rest of the screen. Any help would be greatly appreciated!

17 hours ago, ebhutch said:

Is there a way to do this for a site's main navigation menu without a plugin?

The Version 7 template "Supply" is the closest I've come, but that template requires a sidebar on the right side of the site as well. None of the other V7 templates allow a sidebar with its own background color. "Wells" looks nice, but I wish I could change its color from White to something else.

I just need sidebar navigation on the left, and the rest of the site to fill the rest of the screen. Any help would be greatly appreciated!

If you share site url, we can give the code to change color

6 hours ago, tuanphan said:

If you share site url, we can give the code to change color

https://vhart.squarespace.com/

Thanks so much @tuanphan!

On 8/16/2020 at 1:51 AM, ebhutch said:

https://vhart.squarespace.com/

 

Thanks so much @tuanphan!

What is access password?

1 hour ago, tuanphan said:

What is access password?

vh2020

Hi tuanphan,

Is this color change doable?

Add to Home > Design > Custom CSS

div#topNav {
    background: #ff0;
}

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS

div#topNav {
    background: #ff0;
}

 

Thanks so much. Is it possible to make the entire column a different color? The Supply template does this and looks great, but Supply also requires a huge sidebar on the right side of the screen.

header#header {
    background: blue;
}

5 minutes ago, tuanphan said:

header#header {
    background: blue;
}

 

That works, thank you. Anyway to adjust the padding around the nav links?

20 hours ago, ebhutch said:

That works, thank you. Anyway to adjust the padding around the nav links?

Your site has expired. If you need to extend trial, you can send me a message.

Hi tuanphan, I have added you as an admin. Is there a way to make the Wells navigation menu look more like the Supply menu in terms of padding and alignment? Screenshots attached.

On 8/3/2020 at 8:48 AM, tuanphan said:

They added Markdown Block in post + this CSS (Home > Design > Custom CSS)

.markdown-block .sqs-block-content {
    background-color: #fafafa;
    border: 3px solid #191717;
    box-shadow: 5px 5px 0 #f09;
    box-sizing: border-box;
    padding: 20px;
    position: sticky;
    position: -webkit-sticky;
    top: 100px;
}

 

I want to apply this to a text block to create kind of a sidebar, but it's not working?

Please help! Here is the link, password is: pending

Thank you!! 

@tuanphan is there anyway you can help me add a sidebar navigation to a site I'm working on too? I've been trying to figure it out for hours, thanks!

On 1/23/2021 at 5:34 AM, tea2204 said:

@tuanphan is there anyway you can help me add a sidebar navigation to a site I'm working on too? I've been trying to figure it out for hours, thanks!

 

Hi. You can also use Sidebar Plugin.

On 1/23/2021 at 8:39 PM, tuanphan said:

Hi. You can also use Sidebar Plugin.

Tuan, do you know if that plugin works with the anchor links on a page too? I'm reaching out to the dev to find out now.

Hi there, 

I'd also like to add a sticky sidebar with anchor link navigation to one of the pages on my site, such as the one on the following link: https://thirtyeightvisuals.com/blog/free-squarespace-plugins-meet-ghost#mgfsp-anchor-08

On 3/9/2021 at 12:53 PM, eekayem said:

Hi there, 

I'd also like to add a sticky sidebar with anchor link navigation to one of the pages on my site, such as the one on the following link: https://thirtyeightvisuals.com/blog/free-squarespace-plugins-meet-ghost#mgfsp-anchor-08

 

tuanphan, I saw your post to add the code below to my custom CSS and I have added it; I know how to insert a markdown block but I don't know how to make an anchor link navigation in it.  Could you tell how?  The page I want to insert the sticky sidebar with anchor link navigation is this: https://www.evelynkm.com/projects/website-redesign-sr4ms Thank you!

 

Hi. Have you solved this yet?

Here is the solution for you guys ! 

Sticky sidebar for Squarespace 7.0 and 7.1 !

https://beatrizcaraballo.com/blog/sticky-content-navigation-squarespace#