Unstick topbar on mobile

Hi,
Sorry for the late reply, since the header is sticky for mobile we will need to add padding to the top of the page to show the slider.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 374px){
.responsive #top #main {
    padding-top: 45% !important;
}
}
@media only screen and (max-width: 430px) and (min-width: 375px){
.responsive #top #main {
    padding-top: 34% !important;
}
}
@media only screen and (max-width: 767px) and (min-width: 431px){
.responsive #top #main {
    padding-top: 22% !important;
}
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet.html_header_top #top #main {
    padding-top: 16% !important;
}
}

Please note that there is not one percentage we can use to make a fluid transition across all possible screen sizes, such as if you test by resizing your browser window, but if you test actual device sizes such as 320px, 425px & 768px with the developer tools you should find that this works well.

Best regards,
Mike

Hi,
Thanks for the feedback, and good catch, this looks fine. Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Sorry for the late reply, this script & css will hide the top bar on scroll down and show on scroll up for mobile.
Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_hide_top_script(){
  ?>
  <script>
( function( $ ) {

  'use strict';

  var $window       = $( window );
  var lastScrollTop = 0;
  var $header       = $( '#header_meta' );
  var headerBottom  = $header.position().top + $header.outerHeight( true );

  $window.scroll( function() {
          var windowTop  = $window.scrollTop();

          // Add custom sticky class 
          if ( windowTop >= headerBottom ) {
              $header.addClass( 'top-sticky' );
          } else {
              $header.removeClass( 'top-sticky' );
              $header.removeClass( 'top-show' );
          }

          // Show/hide
          if ( $header.hasClass( 'top-sticky' ) ) {
              if ( windowTop <= headerBottom || windowTop < lastScrollTop ) {
                  $header.addClass( 'top-show' );
              } else {
                  $header.removeClass( 'top-show' );
              }
          }
          lastScrollTop = windowTop;
  } );
} ( jQuery ) );
</script>
<?php
}
add_action('wp_footer', 'custom_hide_top_script');

Then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 1023px){
.top-sticky {
	display: none;
}
.top-sticky.top-show {
	display: block;
}
.responsive #top #wrap_all #header + #header_meta.top-sticky {
    top: 0 !important;
}
}

Then clear your browser cache and check.
**Please note that if testing on a desktop with a mobile sized window you may need to reload the page for the window size to be recognized. This doesn’t affect actual mobile devices just resized desktop browsers.

Best regards,
Mike

Hi,
Sorry for the late reply, I have adjusted the script to :

function custom_hide_top_script(){
  ?>
  <script>
( function( $ ) {

  'use strict';

  var $window       = $( window );
  var $header       = $( '#header_meta' );
  $window.scroll( function() {
          var windowTop  = ($(window).scrollTop() <= 0);
          if ( windowTop ) {
              $header.addClass( 'top-show' );
              $header.removeClass( 'top-hide' );
          } else {
              $header.removeClass( 'top-show' );
              $header.addClass( 'top-hide' );
          }
  } );
} ( jQuery ) );
</script>
<?php
}
add_action('wp_footer', 'custom_hide_top_script');

and the css to:

@media only screen and (max-width: 1023px){
#header_meta.top-hide {
	min-height: 0;
	height: 0;
	visibility:hidden;
    opacity:0;
    transition:min-height 1s linear;
}
#header_meta.top-show {
	min-height: 61px;
    visibility:visible;
    opacity:1;
    transition:min-height 1s linear;
}
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
The “Sticky Header”, “Shrinking Header” & “Unstick topbar” theme options are not designed to work on mobile devices, so while we are attempting to duplicate this, it is not EXACTLY the same.
I believe we can get close, but I can’t say that this customization will be EXACTLY the same.

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for your patience. So I re-wrote the script and disabled your css for the fixed mobile header and I found that the header and topbar were scrolling smoothly but the slider was not, so once I adjusted for that it looks smooth.
Please clear your browser cache and check.

This is the new script:

function custom_hide_top_script(){
  ?>
  <script>
(function($){
  $(window).scroll(function(){
  	var width = $(window).width();
  	var scrolled = $(window).scrollTop();
 if ( scrolled >= 60 && width <= 767) { 	
  $( '#header' ).each(function() {
  $(this).css({'background-color':'#ffffff','position':'fixed','top':'-60px'});
  $('#full_slider_1').css({'padding-top':'130px'});
  });
 }
 else if ( scrolled <= 60 && width <= 767){
 	$( '#header' ).each(function() {
 	$(this).css({'background-color':'#ffffff','position':'relative','top':'0'});
 	$('#full_slider_1').css({'padding-top':'0px'});
 });
  } else {}
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_hide_top_script');

Best regards,
Mike

Hi,
Thank for the feedback, glad to hear it’s working for mobile, I had not looked at the tablet view yet, to expand this script for tablet I adjusted to this:

function custom_hide_top_script(){
  ?>
  <script>
(function($){
  $(window).scroll(function(){
  	var width = $(window).width();
  	var scrolled = $(window).scrollTop();
 if ( scrolled >= 60 && width <= 480) { 	
  $( '#header' ).each(function() {
  $(this).css({'background-color':'#ffffff','position':'fixed','top':'-60px'});
  $('.responsive #top #wrap_all #main').css({'padding-top':'113px'});
  });
 }
else if ( scrolled <= 60 && width <= 480){
 	$( '#header' ).each(function() {
 	$(this).css({'background-color':'#ffffff','position':'relative','top':'0'});
 	$('.responsive #top #wrap_all #main').css({'padding-top':'0px'});
 });
  }
else if ( scrolled >= 30 && width >= 480) { 	
  $( '#header' ).each(function() {
  $(this).css({'background-color':'#ffffff','position':'fixed','top':'-30px'});
  $('.responsive #top #wrap_all #main').css({'padding-top':'113px'});
  });
 }
else if ( scrolled <= 30 && width >= 480){
 	$( '#header' ).each(function() {
 	$(this).css({'background-color':'#ffffff','position':'relative','top':'0'});
 	$('.responsive #top #wrap_all #main').css({'padding-top':'0px'});
 });
  } else {}
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_hide_top_script');

This is because before 480px your topbar is 60px high & after 480px your topbar is 30px.
There is still a slight jump on scroll down, this is because the #main container is given zero padding, but we want it to have a 113px offset (padding-top), so on scroll when the top padding is removed from the #main it looks like it is jumping.
I’m not sure we are going to be able to overcome this.

Best regards,
Mike