CMS Development

ErinKas
Stratege/Strategin

Pillar Page - May be a big ask

lösung

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 Akzeptierte Lösung
Stephanie-OG
Lösung
Autorität

Pillar Page - May be a big ask

lösung

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!

Lösung in ursprünglichem Beitrag anzeigen

18 Antworten
PMeister
Mitglied

Pillar Page - May be a big ask

lösung
0 Upvotes
dennisedson
HubSpot-Produktteam
HubSpot-Produktteam

Pillar Page - May be a big ask

lösung

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 Upvotes
PMeister
Mitglied

Pillar Page - May be a big ask

lösung

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
PMeister
Mitglied

Pillar Page - May be a big ask

lösung

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
HubSpot-Produktteam
HubSpot-Produktteam

Pillar Page - May be a big ask

lösung

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 Upvotes
PMeister
Mitglied

Pillar Page - May be a big ask

lösung

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
HubSpot-Produktteam
HubSpot-Produktteam

Pillar Page - May be a big ask

lösung

@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 Upvotes
PMeister
Mitglied

Pillar Page - May be a big ask

lösung

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
HubSpot-Produktteam
HubSpot-Produktteam

Pillar Page - May be a big ask

lösung

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 Upvotes
PMeister
Mitglied

Pillar Page - May be a big ask

lösung

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
HubSpot-Produktteam
HubSpot-Produktteam

Pillar Page - May be a big ask

lösung

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 Upvotes
PMeister
Mitglied

Pillar Page - May be a big ask

lösung

Thanks,

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

0 Upvotes
Stephanie-OG
Autorität

Pillar Page - May be a big ask

lösung

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
Stratege/Strategin

Pillar Page - May be a big ask

lösung

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
Autorität

Pillar Page - May be a big ask

lösung

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
Stratege/Strategin

Pillar Page - May be a big ask

lösung

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
Lösung
Autorität

Pillar Page - May be a big ask

lösung

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
Stratege/Strategin

Pillar Page - May be a big ask

lösung

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

0 Upvotes