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.
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:
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.
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!
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?
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.
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?
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 😀
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 😄
Are you referring to having a sticky header, like this?
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!
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?
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?
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: