Pillar Page - May be a big ask

SOLVE
ErinKas
Top Contributor

Community:

 

I am trying to create a pillar page here https://blog.guidancepointllc.com/-temporary-slug-aeb80943-7d0f-4409-be73-4eb6d7bf4079?hs_preview=qa...

 

I would LOVE for the nav AKA table of contents to float as someone scrolls on this page or any future pillar pages that we create using this template. Can ANYONE help?

 

Thanks in advance. 

 

I am ok with it being on the left or right side of the page as well.

 

 

Thank you Thank You Thank You in advance!

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Stephanie-OG
Solution
Key Advisor

It's stop once it reaches the next element below it. 

 

Instead you'll want to have a wrapper around the table of contents module on the left-hand side and a wrapper around the rest of the elements on the right-hand side. Something like this:

 

layout.png

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

View solution in original post

18 Replies 18
Stephanie-OG
Key Advisor

Hi Erin!

 

Are you referring to having a sticky header, like this?

 

fixed-header-gif.gif

 

If so, something like this line of code should do it: 

 

.custom-header-wrapper { position: fixed; }

 

You'll probably also want to reduce the logo size and maybe hide the CTAs. On mobile the menu is also not in the same wrapper so it doesn't stay sticky. 

 

Let me know if you're trying to do something else!

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
ErinKas
Top Contributor

Hey @Stephanie-OG Sortof! I want the table of contents to be the thing that goes down the page as someone scrolls? Is that possible? I do like the idea of the header being sticky tho....Do I just add that code to the style sheet if I want to go that route?

0 Upvotes
Stephanie-OG
Key Advisor

I see! I hadn't spotted the table of contents before.

 

 

You're probably looking at a sticky element then. You can give it a class (like "table-of-contents") and then use the following: 

 

.table-of-contents {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

and then it should stick:

 

sticky-table-of-contents.gif

 

I haven't used sticky much myself and do recall getting frustrated with it although I can't quite remember the exact issues I had :S

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

 

0 Upvotes
ErinKas
Top Contributor

Thats exactly what I want @Stephanie-OG now the only issue is that it stops, is that because of the way the template is set up? Do you have any suggestions there?

 

Thanks!

 

Erin

Pillar page.png

0 Upvotes
Stephanie-OG
Solution
Key Advisor

It's stop once it reaches the next element below it. 

 

Instead you'll want to have a wrapper around the table of contents module on the left-hand side and a wrapper around the rest of the elements on the right-hand side. Something like this:

 

layout.png

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

View solution in original post

ErinKas
Top Contributor

Thank you thank you thank you @Stephanie-OG!!!!!!!

0 Upvotes
PMeister
Member

Hi @Stephanie-OG, I am creating a table of contents on a long form post. I don't have drag-n-drop templates (shown above). Where do you put that css code to make the table of contents sticky? 

0 Upvotes
dennisedson
Community Manager

Hi @PMeister!

Are you working with a blog post or landing page? 

If you are working with a blog post, this method would need some additional setup because all of the blog posts for a blog use the same template.  So unless you want all of them to have a table of contents, you would need to set up parameters for when to display a table of contents.

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
PMeister
Member

Hi @dennisedson,

It is on a landing page. I think I'd like to create a dedicated pillar page template, but my landing page template has add-on modules in the page editor. My table of contents is a rich text module that was added in the page editor (not on the template), and I don't have the ability to style it in the page editor. Thoughts?

 

Thanks,
Patty 

0 Upvotes
dennisedson
Community Manager

@PMeister 

You can add a style to the head of the page in the page settings.

If you click on settings and scroll down, you should see Advanced Options.  Click on that and you should see an area to add code to the head or the footer.  Use the head section. 

Make sure to wrap the style in <style> add styles here </style>

Worse case scenario, you can also add styles to the rich text editor by opening the html view.

Eventually, you will want to create a custom template for this 😀

 

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
PMeister
Member

Thanks @dennisedson,

I tried adding the code to both places, in the head section of page and in the HTML code for the rich text module. But no success.
Settings.pngSource-code.png  

0 Upvotes
dennisedson
Community Manager

Hey @PMeister 

A few things to consider,

The anchor with the ID of TABLE-OF-CONTENTS is using a - rather than an =

I think instead of an anchor tag, you should use a div. 

and you need to include everything that you want in the table of contents within it.
I created a pen that hopefully will help 😀

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
PMeister
Member

Thanks for your help @dennisedson ! I've added the <div> and dropped the CSS in the Head section, but it's still not sticking.

Here are some screen shots:

Source-code.pngSettings.png

0 Upvotes
dennisedson
Community Manager

Thanks for the info @PMeister 

It would be helpful is you sent a link to the page you are working on so we can have an example of the problem.  Will go a long way in troubleshooting 😄

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
PMeister
Member

Thanks,

I sent it via email. Let me know if you didn't get it.

0 Upvotes
PMeister
Member
0 Upvotes
dennisedson
Community Manager

Hey @PMeister !

The problem is that you have your sticky element buried inside another element.  You need to add the css to the highlighted div in the attached screengrab.  I am reluctant to use any of the classes that are already on that div (such as main-section-column-2-vertical-alignment or main-section-column-2-padding ) because those appear to have a purpose such as adding padding etc.  I would recommend creating a new css class and adding to this div such as sticky.

Developer_Tools_—_The_Beginner_s_Guide_to_Virtual_Events___ViewStub_—_https___explore_viewstub_com_virtual-events-guide.png

 Best of luck!

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
PMeister
Member

Hmmm, not sure how to get to that div from the landing page editor or from the template. Things were a lot easier when the templates were drag n' drop. I've spent a ton of time on this and it's still not resolved. Frustrating!

 

0 Upvotes