Remove FIXED POSITION header on MOBILE only

Hello!

I will like to hide the header on scroll only on mobile. Thanks so much for any help in advance!

This is the website www.lacalifornie.es

21 minutes ago, LucyBold said:

This is the website www.lacalifornie.es

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media only screen and (max-width: 767px){
  #header.shrink {
    visibility: hidden !important;
  }
}

Thanks so much @Web_Solutions!
It worked perfectly BUT i wonder if there is a way to make the header appears back smoothly when scrolling down back to the top. Right now it does a weird jump. See attachment. 

Thanks in advance!

11 minutes ago, LucyBold said:

Thanks so much @Web_Solutions!
It worked perfectly BUT i wonder if there is a way to make the header appears back smoothly when scrolling down back to the top. Right now it does a weird jump. See attachment. 

Thanks in advance!

 

Can you replace the previous code with the code below?

@media only screen and (max-width: 767px){
  #header.shrink {
    position: absolute !important;
  }
}

Thank you @Web_Solutions! i think it is much better now.
I was looking for this effect https://www.1stdibs.com/es/?gad_source=1&gclid=CjwKCAiAx_GqBhBQEiwAlDNAZt6093Q93KLMBt8D0A60dKMjHXuZvopAnhBQXK4tp0rhMLPQY2iTiRoCdVMQAvD_BwE&gclsrc=aw.ds

What are your thoughts?

2 minutes ago, LucyBold said:

Thank you @Web_Solutions! i think it is much better now.
I was looking for this effect https://www.1stdibs.com/es/?gad_source=1&gclid=CjwKCAiAx_GqBhBQEiwAlDNAZt6093Q93KLMBt8D0A60dKMjHXuZvopAnhBQXK4tp0rhMLPQY2iTiRoCdVMQAvD_BwE&gclsrc=aw.ds

What are your thoughts?

Did you meant this?

I am referring to the behaviour of the show/hide of the header on MOBILE for this site. It feels very smooth.
@Web_Solutions