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);

• This reply was modified 1 year, 1 month ago by matthiasmatthias.