Hide Top Bar When Scroll Only in Smartphone…

Here the Video, because it’s hard to explain.
Test with My Phone Android 5,5″, with horizontal and vertical view the problem does not change.
For Tablet or Pc desktop the problem does not exist!
Video: https://www.youtube.com/watch?v=FJMS1qbd3Uo
Thanks

• This reply was modified 6 years, 10 months ago by denisj77.

Try here, Thanks

Hi, I Want Enabled Transparent Header on mobile Devices, I do not know if you can solve the problem!
I Left Here my CSS Code and Credentials..
Thanks

#top.page-template-default.page.stretched #main .container:before {
content: ‘ ‘;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.2;
background-image: url(https://residenzeparadiso.com/wp-content/uploads/2017/12/chaplet-2489637_1920.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#top.page-template-default.page.stretched #socket .container:before {
background-image: url(https://residenzeparadiso.com/wp-content/uploads/2018/01/whitebackground.png) !important;
background-repeat: repeat;
}
#top.page-id-61 .inner_sidebar {
font-style: normal!important;
}
.header_color .weather {
color: black;
}
#top .av_header_transparency #header_meta {
border-bottom: none! important;
}
.inner_sidebar {
margin-left: 30px;
}
.main_color table,
#top .main_color .avia-data-table.avia_pricing_minimal th {
background: transparent;
}
.weather {
position: relative;
float: right;
top: -10px;
right: 150px;
}
#top.page-id-53 .avia-slideshow-controls {
display:none!important;
}
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
background: transparent!important;
position: absolute!important;
}
#header_meta .container {
max-height: 30px;
}
#top .av_header_transparency #header_main {
top: -50px;
}
.responsive .logo img {
max-height: 40%; top: 0px;
}
.weather {
top: -30px;
}
.responsive #header_meta .sub_menu ul {
text-align:right!important;
color:#000!important;
}
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
padding-left: 25px!important;
padding-right: 25px!important;
}
}
@media only screen and (max-width: 769px) {
.html_header_top #top #header .logo {
margin-top: 0px;
}
@media only screen and (max-width: 754px) {
.weather {
right: 115px!important;
}
}