I've encountered an issue with creating a sticky button in the code snippet below.
https://codepen.io/nht910/pen/KKKKerQ
Snippet:
<div class="post-body d-flex justify-content-center">
<!-- content -->
<div class="post-content">
<p>
...
</p>
</div>
<!-- button toggle -->
<button type="button" class="btn btn-outline-primary" id="toc-button">
button
</button>
<!-- table of contents -->
<div class="post-toc">
<nav class="sticky-top" id="toc"></nav>
</div>
</div>
The button in this code is currently set to have the property "position: absolute;". I attempted to change this property to "position: sticky", but it caused the layout to break and the content was no longer centered.
Additionally, upon page load, the table of contents is already expanded by default.
I'm seeking assistance in making the button sticky within the parent div ".post-body" like the table of contents, ensuring that it remains above the table of contents. Furthermore, I would also appreciate help with setting the table of contents to be closed on page load.
Thank you for your assistance!