How can I make my menu navigation 'sticky' on my page?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1

Hello, I have created a menu navigation within my page and I wanted to make it 'stick' on screen so that when the user scrolls further down, it stays within sight.

Is this possible?

Page = https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1

Pword = bluebird

Many thanks,

Best,

Faiz

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1

Hello, I want to make my 3rd section on my page 'sticky' so it acts like a menu

Page here = https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1

Pword = bluebird

I came across this code online which I have inserted into my page injection header:

<style>
.page-section:nth-child(3) > .content-wrapper  {
  padding: 50px!important;
  max-width: 5000px!important;
  min-height:1vh!important;
  overflow-x:hidden!important;
  }
  .page-section:nth-child(3) {
    position: -webkit-sticky!important;
    position: sticky!important;
    top: -5px;
    z-index: 99999;
  }

</style>

It seems to be working well however, I want to know if I can make this whole section transparent, so the viewer can see more of the screen.

I only want this to happen on desktop only.

Please help me.

Thank you,

Best,

Faiz