Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #937254

    Hi,
    is it possible to display the mobile menu allways (max. 1250px) additional to the text menu ?
    I have seen this here:

    Unfortunately it doesn’t work (inluded in style.css):

    @media only screen and (max-width: 1250px) {
    .av-main-nav > li.menu-item-avia-special {
        display: block;
    }
    .av-main-nav > li.menu-item {
        display: none;
    }}
    

    Cheers,
    Hans-Gerd

    #937294

    Hey hagege,

    Yes, you can show both, but the burger will have all the same menu items. Is this what you’re looking for?

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #937321

    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 3 years, 1 month ago by  hagege.
    #937504

    Hi,

    Thanks for that. Please try this CSS instead:

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

    Best regards,
    Rikard

    #937555

    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

    #938004

    Hi hagege,

    Please remove the code given above, and use the code below:

    
    @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;
        }
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #938032

    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 3 years, 1 month ago by  hagege.
    #938107

    Hi hagege,

    There is another rule that overrides it, but you enabled minification and I cannot see where it is coming from.

    Can you disable caching and minification for now?

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

    Best regards,
    Victoria

    #938112

    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 3 years, 1 month ago by  hagege. Reason: potential solution for menu issue, see UPDATE 3
    #938959

    Hi hagege,

    Yep, looks good on the dev server. Do you need more help or is this a working solution for you?

    Best regards,
    Victoria

    #938962

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

    Best regards,
    Hans-Gerd

    #938986

    Hi Hans-Gerd,

    Thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.