Jump to content

Sticky div under nav on index

Recommended Posts

Site URL: https://www.crescentridgedairybar.com/products

I have a div named .fixedelement with position: sticky; top: 0; on an index page

 

Here is the code block code i'm using:


<style>
  .fixedelement {
    position: sticky;
    top: 00px;
    width:100%;
    margin: 0px;
    background-color: white; 
    padding: 5px;
    min-width: 300px;
    overflow: visible;
    position: -webkit-sticky;
    
  }
</style>
<div class="fixedelement">


  
 
  
<a href="#milk"><button style=" width: 23%;white-space: nowrap; font-size: 18px; font-family: arial;overflow: visible;  transition: opacity 0.1s linear 0s;  border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px;  text-align: center; text-decoration: none; cursor: pointer; appearance: none; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px; align: center;">
  <b>Milk </b>
  </button></a>
  <a href="#icecream"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial;  transition: opacity 0.1s linear 0s;  border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px;  text-align: center; text-decoration: none; cursor: pointer; line-height: normal;overflow: visible;  padding: 10px;  min-width: 100px;margin-bottom: 10px;">
    <b>Ice Cream </b>
  </button></a>
    <a href="#beefandpork"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial;  transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; overflow: visible; display: inline-block; height: auto; border-width: 0px;  text-align: center; text-decoration: none; cursor: pointer;  line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px;">
    <b>Beef & Pork </b>
  </button></a>
      <a href="#Novelties"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial;  transition: opacity 0.1s linear 0s;  border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px;  text-align: center; text-decoration: none; cursor: pointer;  line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px;overflow: visible; ">
    <b>Novelties </b>
  </button></a>
 
  </div>


 

Link to comment
  • Replies 1
  • Views 148
  • Created
  • Last Reply

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.