CMS Development

ErinKas
Top colaborador(a)

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
1 Solução aceita
Stephanie-OG
Solução
Conselheiro(a) de destaque

Pillar Page - May be a big ask

resolver

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!

Exibir solução no post original

18 Respostas 18
PMeister
Membro

Pillar Page - May be a big ask

resolver
0 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Pillar Page - May be a big ask

resolver

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!

0 Avaliação positiva
PMeister
Membro

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
PMeister
Membro

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Pillar Page - May be a big ask

resolver

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.

0 Avaliação positiva
PMeister
Membro

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Pillar Page - May be a big ask

resolver

@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 😀

 

0 Avaliação positiva
PMeister
Membro

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Pillar Page - May be a big ask

resolver

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 😀

0 Avaliação positiva
PMeister
Membro

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Pillar Page - May be a big ask

resolver

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 😄

0 Avaliação positiva
PMeister
Membro

Pillar Page - May be a big ask

resolver

Thanks,

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

0 Avaliação positiva
Stephanie-OG
Conselheiro(a) de destaque

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
ErinKas
Top colaborador(a)

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
Stephanie-OG
Conselheiro(a) de destaque

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
ErinKas
Top colaborador(a)

Pillar Page - May be a big ask

resolver

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 Avaliação positiva
Stephanie-OG
Solução
Conselheiro(a) de destaque

Pillar Page - May be a big ask

resolver

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!

ErinKas
Top colaborador(a)

Pillar Page - May be a big ask

resolver

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

0 Avaliação positiva