force burger menu on ipad landscape, max-width mobile, anchor links ipad wrong

Hi
I have a few issues with the site below:

1. on mobile, I want the max-width to be 100% instead of 90% as it seems to be now. I tried variations of this css without success:

@media only screen and (max-width: 767px) and (max-width: 1024px){
.responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%!important;
}}

2. I want to force the burger menu on tablets since my text menu overlaps the logo. I found this on another thread, but it doesn’t work for me:

@media only screen and (max-width: 1024px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

3. Also on ipad, I have anchor links on a secondary menu on the 2nd page listed below, but on the ipad the links land too low – below the heading. It’s fine on the PC. I looked through the support and found some threads – add this code to functions.php on my child theme, but nothing changed:

// custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
  function a() {
      $('#top #header .av-main-nav > li').on('click touchstart', 'a', function(e) {
          if( $(window).innerWidth >= 1025 ) return;
          var anchor, loc, cur, hash, tab, parent, pos;
          anchor = $(this).attr('href');
          hash = anchor.substring(anchor.indexOf('#')).replace(/\#/g, '');
          anchor = $('.avia-section[id='+ hash +']');
          pos = anchor.offset();
	
          if(hash) $(window).scrollTop( pos.top - 100 );
      });
  }

  a();
})(jQuery);
</script>
<?php
}

Can you help me with these issues?
thanks very much
Nancy

• This topic was modified 6 years, 1 month ago by Munford.