Mobile Menu should allways displayed

Hi Victoria,
yes indeed – thanks for answer.
I will send you links to websites in private content.
Best regards,
Hans-Gerd

• This reply was modified 6 years, 8 months ago by hagege.

Hi Rikard,
thanks for answer and your advice.

I’m very sorry, but the solution doesn’t work properly.
From 990px to 1250px the menue will not be shown – see screenshot 1 in private content.

May be, you have another solution for the issue (showing not all menue items for example on 1100px device) – see screenshot 2

Best regards,
Hans-Gerd

Hi Victoria,
thanks a lot for your assistance, but unfortunately it doesn’t work properly for example on iPad Pro (developer tools) in portrait modus and on iPad in landscape modus. See attached screenshot in private content.
I have tested it in developer tools and also on iPad.

In live-version we use the following code:

/*------------------------------------------------------------------------------ */
/* Fix for: Menu doesn't appear landscape mode on iPad, Enfold, 3.9.2017 */
/* geändert: 1.4.2018 - 4.4.2018, hgg */
/* Geklärt: Menue soll als mobiles Menü bis 989px angezeigt werden. */
/*------------------------------------------------------------------------------ */
@media only screen and ( max-width: 989px ) {

  .container #advanced_menu_toggle, .container #advanced_menu_hide {
    display: block;
  }

/*
  .responsive .main_menu {
    display: none;
  }

  .responsive #mobile-advanced {
    display: block;
  }

*/
/* Anzeige Menue und Suche: */
  nav.main_menu {
    display: block !important;
  }

  #avia-menu .menu-item {
    display: none !important;
  }
/* Anzeige Menue*/
  .av-burger-menu-main.menu-item-avia-special {
    display: block !important;
  }
/* Container (Inhalte) werden 100% angezeigt, allerdings nicht unter 767px - Regel aus grid.css*/
  .container {
    max-width: 100% !important;
  }
  
  #top #main .sidebar {         
    width: 100% !important;
  }
  
/* Damit die grüne Leiste mit dem Menü und der Suche nicht unterhalb des Logos gezeigt wird */ 
  #header_main_alternate, #header_main_alternate .sub-menu a {
    display: none !important;
  }
  
/* Damit der Content (Inhalt) über die Breite gezeigt wird und nicht die sidebar frei gehalten wird */  
  .content { 
    width: 100% !important; border: none !important; 
  }

 /* Sonst wird die Suche nicht richtig als Icon gezeigt */
  #top #menu-item-search {
      width: 20px;
      display: block !important;
  }  

/* Damit das Word "Menue" unter dem Hamburger-Menue nicht gezeigt wird */
  .av-hamburger strong {
    display: none!important;
  }
}

This works, but not showing all items of the menue in landscape modus on iPad Pro – I have send you a screenshot before.
Moreover the word “menue” below Hamburger should not be shown – don’t know why the rule in code doesn’t work.

Best regards,
Hans-Gerd

• This reply was modified 6 years, 8 months ago by hagege.

Hi Victoria,
thanks.

Can you disable caching and minification for now?

just done: deactivated WP Rocket

The code that you posted in working up to the screen of 989px and it is not the code I gave you.

yes, I wrote, that this is the code using in live version.
But on developemnt environment I have used your code:

@media only screen and (max-width: 1250px) {
    #header_main_alternate {
        display: none;
    }

    .html_header_top.html_header_sticky.html_bottom_nav_header #main {
        padding-top: 88px;
    }
    .html_header_top #top .av_menu_left .main_menu {
        left: auto;
        right: 0;
    }
    #avia-menu li#menu-item-search.menu-item {
        display: block;
    }
}

UPDATE: just seen the reason for the issue with the word “menue” – see screenshot 4 – but dont’t know, to solve it
UPDATE 2: Just find the reason for the issue with the word “menue” and solved: Design->Customizer->Additional CSS (I remember, that we insert it long time ago in July 2017 because of an issue with the mobile menu)
UPDATE 3: It seems as if I have found (not optimum) solution. See dev environment:

@media only screen 
and (min-device-width : 990px) 
and (max-device-width : 1100px)
{
   /* Container (Inhalte) werden 100% angezeigt, allerdings nicht unter 767px - Regel aus grid.css*/
  .container {
      max-width: 100% !important;
   }
 
/* Damit der Content (Inhalt) über die Breite gezeigt wird und nicht die sidebar frei gehalten wird */  
  .content { 
      width: 100% !important; border: none !important; 
   }

/* Wenn die Schriftgröße auf 90% verringert wird, wird das Menü komplett gezeigt: */
  .avia-menu-text {
      font-size: 90% !important;
  }
}

@media only screen 
and (min-device-width : 1101px) 
and (max-device-width : 1250px) {

/* Wenn die Schriftgröße auf 90% verringert wird, wird das Menü komplett gezeigt: */
  .avia-menu-text {
    font-size: 90% !important;
}

}

Thanks for advice.

Best regards,
Hans-Gerd

• This reply was modified 6 years, 8 months ago by hagege. Reason: potential solution for menu issue, see UPDATE 3

Hi Victoria,
I think that is the best solution which is possible.
Thanks for your advice.

Best regards,
Hans-Gerd