Make fixed markdown block appear on scroll

Site URL: https://www.oryxdentalsoftware.com/

Hello,

I created a fixed side button using a markdown block  and added this css, How I can make it appear after scrolling to half of the page for example? Thanks 

//floatbutton
@media screen and (min-width:780px){
#block-yui_3_17_2_1_1636542167286_21969{
display:none;}
}

#collection-615d61d5e2d9b308d84cac49
.sqs-block-markdown .sqs-block-content *:first-child{display:none;}

.kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #03327c;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
  
   font-weight: bold;
   font-size: 18px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

On 11/10/2021 at 6:46 PM, Yaraf said:

Site URL: https://www.oryxdentalsoftware.com/

Hello,

I created a fixed side button using a markdown block  and added this css, How I can make it appear after scrolling to half of the page for example? Thanks 

 

//floatbutton
@media screen and (min-width:780px){
#block-yui_3_17_2_1_1636542167286_21969{
display:none;}
}

#collection-615d61d5e2d9b308d84cac49
.sqs-block-markdown .sqs-block-content *:first-child{display:none;}

.kl-float {
   position: fixed;
   opacity: .9;
   top: calc(30%);
   right: 0;
   z-index: 20000;
   background-color: #03327c;
   white-space: nowrap;
   text-align: center !important;
   border-radius: 0px;
   height: 28px;
  
   font-weight: bold;
   font-size: 18px;
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform-origin: bottom right;
}

Hi @Yaraf,

Can you share the screen of this block, I can not find the id or class in your above code?

Hello,

Actually I changed my mind, I will add it to the mobile header, I have the code to add it in the middle, but how I can make the elements in this order:

Burger-menu icon > logo (centered) > CTA ? And make the cta smaller?

/* Show button on mobile menu*/
@media screen and (max-width:1024px) {
 
/* show button */
.header-actions {
    display: block !important;
}
.header .header-actions-action--cta {
    display: block;
    width: 10% !important;
}
 
/* logo width */
.header-title-nav-wrapper {
    flex: 50% !important;
}
}
 

I found this code for the right order but I can't make the button smaller

I think I solved it 

I added 

 .header-actions.header-actions--right  a{
    padding: 10px;
   font-size:12px;
    margin-left:12px;

}
  

1 hour ago, Yaraf said:

I think I solved it 

I added 

 .header-actions.header-actions--right  a{
    padding: 10px;
   font-size:12px;
    margin-left:12px;

}
  

It 's good to know, bro!