Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1236119

    Hallo , please i want to make me mobile and tablet menu shrinked as desktop version with the difference , if scroll on mobile/tablet down menu schrink upsite and its invisible, if scroll up menu schrink down and its visible

    #1236981

    Hey DovolenkujLacno,

    Sorry for the delay. We are a little confuse about your inquiry. Could you explain it a bit further? You could also provide a screenshot using imgur or dropbox so that we can better understand what you’re trying to do.

    Best regards,
    Ismael

    #1239944

    I would like the same header as for the phone as it is now for computers. I want to have a header for mobile phones and tablets, so let it be fixed at the top and when I scroll down, let it just shrink to 40 px. The science example shows the current state. I also want the same header for phones and tablets as it is now in the video for computers

    #1239945

    The domain diehilfe.ch was just for development The site is already online at entercon.ch

    #1240007

    Hi,
    Thank you for the login but it is not an admin login so we can not add the script to your site.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
      ?>
      <script>
    ( function( $ ) {
    
      'use strict';
    
      var $window       = $( window );
      var lastScrollTop = 0;
      var $header       = $( '#header' );
      var headerBottom  = $header.position().top + $header.outerHeight( true );
    
      $window.scroll( function() {
              var windowTop  = $window.scrollTop();
    
              // Add custom sticky class 
              if ( windowTop >= headerBottom ) {
                  $header.addClass( 'myprefix-maybe-sticky' );
              } else {
                  $header.removeClass( 'myprefix-maybe-sticky' );
                  $header.removeClass( 'myprefix-show' );
              }
    
              // Show/hide
              if ( $header.hasClass( 'myprefix-maybe-sticky' ) ) {
                  if ( windowTop <= headerBottom || windowTop < lastScrollTop ) {
                      $header.addClass( 'myprefix-show' );
                  } else {
                      $header.removeClass( 'myprefix-show' );
                  }
              }
              lastScrollTop = windowTop;
      } );
    } ( jQuery ) );
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_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: 767px) { 
    .myprefix-maybe-sticky {
      position: fixed !important;
      top: -120px;
      width: 100%;
      z-index: 999;
      opacity: 0;
      background: #fff;
      transition: 0.3s all;
      box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    }
    
    .myprefix-show {
      top: 0;
      opacity: 1;
    }
    }

    Then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    #1240056

    Thanks, it works perfectly

    #1240074

    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 in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Mobile menu on scroll down hide and on scroll up show’ is closed to new replies.