Tagged: , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1066784

    Hi Team!

    I want to achieve the following:

    – Make the header (hamburger + logo) sticky on mobile
    – Make the top bar NOT sticky on mobile
    – When the top bar disappears off the top of the screen, the header occupies the top of the screen

    So for each page load on mobile, the top bar and header appear. Then, as the user scrolls downward, the header moves to the top and stays there – while the top bar has disappeared off the top of the screen.

    Can this be done using only theme options and CSS? Or does this require JS?

    I’ve put a sample site in the Private Content.

    Thanks for any help!
    D

    #1067735

    Hey sdigit,

    Best regards,
    Victoria

    #1067837
    This reply has been marked as private.
    #1068986

    Hi,
    Sorry for the late reply, I took a look at your example site and then tested what you described on my localhost, and found that we can make the header sticky on mobile with this css:

    @media only screen and (max-width: 800px) {
      .responsive #top #wrap_all #header {
        position: fixed !important; 
      }
    }

    but to hide the top-bar on scroll we can use this jQuery:

    (function ($) { 
      $(window).scroll(function() {    
          var scroll = $(window).scrollTop();
          if (scroll >= 100) {
              $("#header_meta").css('display', 'none');
          } else {
               $("#header_meta").css('display', 'block');
          }
      });
      })(jQuery);

    We could refine it a little better if we could see your Enfold build of the site, have you begun this yet or are you still working on a mockup?

    Best regards,
    Mike

    #1069009

    Hello,

    I’m also interested to stick my header at the top (this part) on mobile and iPad.
    I’ve tried you css
    @media only screen and (max-width: 767px) {.responsive #top #wrap_all #header {position: fixed !important;}}
    it keeps the header together with the top bar almost in the middle of the screen. And putting

    (function ($) { 
      $(window).scroll(function() {    
          var scroll = $(window).scrollTop();
          if (scroll >= 100) {
              $("#header_meta").css('display', 'none');
          } else {
               $("#header_meta").css('display', 'block');
          }
      });
      })(jQuery);

    in my functions.php of the Child Theme destroyed all the website. So I deleted everything…

    #1069226

    Hi,
    @Anton I’m sorry, I was trying to hurry and the jQuery was just the raw script and not formatted for WordPress, if you want to try it try this code below. This works on my localhost, but unless I see the page in question I can’t be sure that the settings are the same.
    The css does make the “header” sticky which includes the topbar. Again I would need to see the site to see why it might not work for you.

    
    function custom_script(){
      ?>
      <script>
     (function ($) { 
      $(window).scroll(function() {    
          var scroll = $(window).scrollTop();
          if (scroll >= 100) {
              $("#header_meta").css('display', 'none');
          } else {
               $("#header_meta").css('display', 'block');
          }
      });
      })(jQuery); 
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');
    

    Best regards,
    Mike

    #1069345

    Hi @mike,

    the code does work now, but there are some adjustments to be done that I can’t do on my own. My website is http://www.newpointdeview.com/blog-en/. For the moment I’ve /*suspended*/ the css code in the Quick CSS, but kept the script in the functions.php.

    1. The breadcrumb went to the top : picture
    2. The header (without topbar) remains sticky in the middle of the screen : picture
    3. The code doesn’t work on iPad
    4. Is it possible to reproduce the same sliding effect of the header while scrolling on mobile and iPad, like on the big screens ? With the given code the header behaviour is jerky.

    May I give here a temporary acces to my admin in the Private Content ?

    #1069519

    Hi,
    @Anton, I would not recommend including your login here, as this is not your post, your details will not be private.
    Perhaps it would be better to open your own thread.
    I don’t know why it would not work on an iPad, but I did find a topic that points to scroll not working with iPad, unfortunately, I don’t have an iPad to test with.

    Best regards,
    Mike

    #1098862

    Hi Enfold team,

    It would be very 2019 to have an option in the backend to choose if you want the mobile menu to stick to the header.
    What do you think?

    Julia

    #1099434

    Hi,
    @hotspot I believe this option is available in the latest update released today. Please see the Changelog and try updating.

    Best regards,
    Mike

    #1186059

    Hi Mike,

    This is still not working in the latest version. Any ideas when to expect it in development?

    #1186324

    Hi,
    Sorry, I don’t see any, not all feature requests make it into development.
    But I understand a new feature requests page is going to be added shortly so it will be another opportunity to submit it for review.

    Best regards,
    Mike

    #1186356

    Can you submit this request for a review? Since it is mobile first, we really miss the option to have the menubar stick to the top on mobile devices.

    Love to hear from you.

    Regards,
    Julia

    #1186950

    Hi,
    Ok, I submitted it.

    Best regards,
    Mike

    #1188802

    Hi, this worked for me very well! Thank you.
    To avoid overlapping header with page content I also inserted code by Yigit, found here:
    https://kriesi.at/support/topic/mobile-sticky-header-hiding-content/

    #1188995

    Hi,
    Thank you for sharing your results and your solution, glad this worked for you.

    Best regards,
    Mike

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Mobile: Sticky header and NON-sticky Top Bar’ is closed to new replies.