Sticky/Fixed Sidebar for Five template

Hello, I'm a beginner. I need to make my sidebar for the 7.0 Five template sticky. Thank you for your help

Can you share your website URL?

https://www.eastridgechiropractic.com/shop 

Password: Coffee

I currently have 2 options that I'm playing around with. Open to your suggestion about which would be a better solution.

1. The left-sided sidebar which I'd like to be sticky. 

2. I also found code for the sticky black buttons on the right side, but I do not know how to make them link up to the different sections on the page. This is the code used:

Quote

<ul class="tp-float-buttons">
        <li><a href="#">Home Care Products</a></li>
        <li><a href="#">Pregnancy Products    </a></li>
        <li><a href="#">Products for Kids    </a></li>
</ul>
<style>
ul.tp-float-buttons {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 999;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
ul.tp-float-buttons a {
    color: white;
    background-color: black;
    padding: 10px;
    margin-bottom: 10px !important;
    display: inline-block;
    min-width: 100px;
    text-align: center;
}
</style>

On 4/17/2023 at 11:47 PM, irenew said:

https://www.eastridgechiropractic.com/shop 

Password: Coffee

 

I currently have 2 options that I'm playing around with. Open to your suggestion about which would be a better solution.

1. The left-sided sidebar which I'd like to be sticky. 

2. I also found code for the sticky black buttons on the right side, but I do not know how to make them link up to the different sections on the page. This is the code used:

 

#2. I think I wrote that code a few years ago

For example this section

you have a Code Block above it

<p id="prenatal-postpartum-products">
  </p>

just change this line

<li><a href="#">Pregnancy Products    </a></li>

to this

<li><a href="#prenatal-postpartum-products">Pregnancy Products    </a></li>