mobile menu fade out when scrolling

  • Resolved matthiasmatthias

    (@matthiasmatthias)


    9 months, 3 weeks ago

    Hello,

    Is it possible to fade out the menu icon in mobile view?

    Something like:

    window.addEventListener('scroll', (event) => {
  if(event.scrollY  > 200) {
    document.getElementById('mobile-site-navigation'').style.display = 'none';
  }
})

    We are using Ephemeris with a child theme for our page and are very happy with it. Only the menu icon in mobile view is in the way when reading the articles.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    Hi,

    This is not something that I would add to the theme, but you can certainly add your own JavaScript snippet to fade out or hide the mobile nav button if you require that functionality. Simply enqueue your extra JS in your child theme.

    My only concern though, if you hide it completely using display:none then you’re obviously not going to be able to open the mobile menu. If you hide it out after scrolling down a certain distance, then you’d need to unhide it after scrolling back up.

    Have you considered just moving the mobile menu button to a different location? The mobile menu currently displays in the bottom-right corner. You could easily move it to the top-right with the following css:

    #mobile-site-navigation {
  bottom: inherit;
  top: 1.5rem;
}
    Thread Starter matthiasmatthias

    (@matthiasmatthias)

    Thank you for the quick response! Here is what I have added to my functions.php:

    function hide_mobile_nav_icon() {
  if ( $post_sidebar_layout == 'none' ) { ?>
    <script>
    document.addEventListener('scroll', (event) => {
      // adjust hide height here
      const hideAtHeight = 200;
      if(event.target.scrollingElement.scrollTop > hideAtHeight) {
        // hides the menu
        document.querySelector('#mobile-site-navigation.mobile-navigation').style.display = 'none';
      } else {
        // shows the menu
        document.querySelector('#mobile-site-navigation.mobile-navigation').style.display = 'block';
      }
    });
    </script>
  <?php }
}
add_action('wp_footer', 'hide_mobile_nav_icon', 100);

    But it re-shows the icon also in desktop mode. Can you help me find the right selector/if-statement to activate this for mobile view only?

    for now I am using window.screen.width, but it is not cohorent with the rest of the style, so a good selector would be preferred.

    function hide_mobile_nav_icon() { ?>
    <script>
    document.addEventListener('scroll', (event) => {
      // adjust hide height here
      const hideAtHeight = 200;
      if(event.target.scrollingElement.scrollTop > hideAtHeight) {
        // hides the menu
        document.querySelector('#mobile-site-navigation.mobile-navigation').style.display = 'none';
      } else if(window.screen.width < 1000) {
        // shows the menu
        document.querySelector('#mobile-site-navigation.mobile-navigation').style.display = 'block';
      }
    });
    </script>
  <?php 
}
add_action('wp_footer', 'hide_mobile_nav_icon', 100);

    Theme Author Anthony Hortin

    (@ahortin)

    Since you’re overriding the theme css, which hides/displays the mobile menu button, I don’t think you have any choice but to check the screen width like you’re currently doing. The CSS uses media queries to determine what width to display or hide the menu button, so unless you go with a pure css option, I think you’ll probably have to check the width yourself in your JavaScript.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘mobile menu fade out when scrolling’ is closed to new replies.