Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 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

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

You must be logged in to reply to this topic.