Jump to content

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

Recommended Posts

  • Replies 1
  • Views 204
  • Created
  • Last Reply

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 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.