stick the header on mobile & iPad

Hi,
Sorry for the late reply, I didn’t see your post.
So I took a look at the header being in the middle of the page, and added some css to the script to account for this, I also added some css to the script to fix the breadcrumbs.
So I have moved all of the css to the script for better control, but for now it only works on screens up to 550px, it will have to be adjusted for above that (tablets), but we’ll see if we can get it to work for mobiles first.
I also added a transition so that it won’t be jerky.
Here’s the script:

function custom_script(){
  ?>
  <script>
 (function ($) { 
  $(window).scroll(function() {
	  var width = $(window).width(), height = $(window).height();
      var scroll = $(window).scrollTop();
	  if ((width <= 550)) {
      if (scroll >= 100) {
          $("#header_meta").css({'height': '0','min-height': '0','transition': 'height 1s ease-out','overflow': 'hidden'});
		  $(".responsive #top #wrap_all #header").css({'top': '-10px','position': 'fixed'});
		  $("#main .title_container").css({'margin-top': '10px','position': 'fixed','z-index': '50'});
      } else {
          $("#header_meta").css({'height': '61px','min-height': '61px'});
		  $(".responsive #top #wrap_all #header").css({'top': '10px','position': 'fixed'});
		  $("#main .title_container").css({'margin-top': '100px','position': 'fixed','z-index': '50'});
      }
		  } else {}
  });
  })(jQuery); 
</script>
<?php
}
add_action('wp_footer', 'custom_script');

Give it a try and let me know what you think.

Best regards,
Mike

Hi,
Thanks for the screenshots, did you want the title and breadcrumbs to disappear on scroll? I thought it was just the topbar to hide. In my tests the title and breadcrumbs are visible below the header, Please see the screenshot in Private Content area.
It seems there is a visible difference between Chrome mobile test and iPhone, unfortunately I don’t have a iPhone.

Best regards,
Mike

Hi,
Ok, I made some adjustments, give it a try now.

Best regards,
Mike

Hi,
Thank you for the images, I will see what else I can adjust. Thank you for your patience.

Best regards,
Mike

Hi,
I believe I got the title bar to show fully on the scroll back. When you test please clear the WP Rocket cache also.

Best regards,
Mike

Hi,
Ok, thanks, I tried to update the “scroll up” height, go ahead and check it out.
As you are testing you can adjust it by looking for this line in the script:

$("#main .title_container").css({'height': '71','margin-top': '200px','position': 'fixed','z-index': '50'});

and adjust the “200px”, the only issue that I can see is that some of your breadcrumbs are much larger than others, so as you adjust the area to accommodate large breadcrumbs, it will also add more empty space to page that have small breadcrumbs. So it’s just a matter of finding a happy medium.

Best regards,
Mike

Hi,
I see what you mean, it seems that my attempt at creating this effect was not a good solution and it’s going to be a bigger job that I thought it would be. Unfortunately it is exceeding the scope of what we are going to be able to provide here. If you wish to pursue this we can recommend the freelancers at Codeable for their expertise.

Best regards,
Mike

Hi,
In your merged child theme css the header is set to 90% width, instead of 100%
Although I couldn’t find it in any of your css.

.responsive.html_boxed.html_header_sticky #header {
    max-width: 90%;
}

Perhaps it is in the css of one of your other languages?
I was able to override it with this css in the WordPress > Customize > Additional CSS field:

.responsive.html_boxed.html_header_sticky #header {
    max-width: 100% !important; 
}

Please check your site after you clear your browser cache to ensure that my fix didn’t affect the header for other pages or posts or in another language.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike