Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #840181

    Hello,

    I updated our site from Enfold 4.0.7 to 4.1.2 and now notice that the Main Menu is not displaying as a mobile/burger menu on mobile screens. I’ve checked the Main Menu settings in Enfold Child Theme options and nothing seems amiss. Can you have a look and let me know what could be causing this?

    Thanks

    #840220

    Hey kvpacs,

    Clear your cache (mainly if you use some cache plugin) and check if it works.

    Best regards,
    John Torvik

    #840635

    Hi John, I’ve cleared all caches and confirmed with my web host that I got them all. Still not seeing the burger menu on mobile. Have cleared browser cache and tried multiple browsers. Any other ideas?

    Thanks

    #840651

    Hi,

    I can see you are having a child theme – and most probably your child theme has a header.php file.
    The issue is there, the mobile is not working because header file needs to get the new updates.

    Best regards,
    Basilis

    #840716

    Hi Basilis,

    That makes sense. I copied header.php from enfold version 4.1.2 into our enfold child theme folder and pasted our additional code into it. Uploaded to the site and purged all caches. Did I do this right? Still cannot see the mobile main menu.

    Theresa

    #841407

    Hi Theresa,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
      nav.main_menu {
          display: block !important;
      }
    }
    

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

    #841749

    Thanks Victoria, you are absolutely right – the CSS was overriding the mobile menu from displaying. Instead of adding your CSS, I removed this from my child CSS file:

    /* SWITCH TO MOBILE MENU AT CUSTOM WIDTH (to fix menu overlap onto logo for 990 – 1024px screens) */
    @media only screen and (max-width: 1024px) {
    nav.main_menu {display:none !important;}
    #advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
    }

    The mobile/burger menu now displays. Can you update this rule to trigger the mobile menu on screens less than 1024px, so that I can add it back into my child CSS?

    I’m also not sure why the mobile sub-menus are not opening. Any ideas about this?

    Thanks again,
    Theresa

    #842015

    Hi Theresa,

    Well, we have an issue with that. Below is the thread about it:
    http://www.kriesi.at/support/topic/ (Purchase code hidden if logged out)(Purchase code hidden if logged out) -1/#post-823575
    And here is yet another slight adjustment to the menu

    
    @media only screen and (min-width: 1024px) {
      .av-main-nav > li > a {
        padding: 0 8px;
      }
    }
    @media only screen and (min-width: 1100px) {
      .av-main-nav > li > a {
        padding: 0 13px;
      }
    }
    

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

    #845953

    Hi Victoria,

    The sub menu fix, replacing # with https:// in the mega menu worked. Thanks for the thread.

    I haven’t had any luck with the new CSS above. I added it to my child CSS file and cleared all caches but cannot see a difference. As I reduce the screen size, the main menu overlaps our logo before switching to a burger menu. I’d like to trigger the mobile/burger menu at 1024px… and like help updating the following CSS we previously used, which no longer works:

    @media only screen and (max-width: 1024px) {
    nav.main_menu {display:none !important;}
    #advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
    }

    Thanks again!

    #847873

    Hi,

    Please take a look at the topic here
    http://www.kriesi.at/support/topic/ (Purchase code hidden if logged out) -breakpoint/

    which will explain how to do things.
    Thank you

    Best regards,
    Basilis

    #848384

    Thanks Basilis. I checked the thread and have inserted the following in my child CSS:

    @media only screen and (max-width: 1100px) {
    .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
    .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
    .html_mobile_menu_tablet #mobile-advanced{display:block;}
    }

    The main menu is hidden at 1100px, which is perfect, but the mobile menu is not displaying until I reduce the screen size to 990px. How do I get the mobile/burger menu to display at 1100px or less?

    Thanks again,
    Theresa

    #848774

    Hi Theresa,

    The code below will show the menu as text from 990px without any overlap, if you want to make it a burger manu, let us know till what screen size.
    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width: 990px) and (max-width: 1023px){
      .av-main-nav > li > a {
        padding: 0 5px;
      }
    }
    
    @media only screen and (min-width: 1024px) and (max-width: 1099px) {
      .av-main-nav > li > a {
        padding: 0 8px;
      }
    }
    @media only screen and (min-width: 1100px) {
      .av-main-nav > li > a {
        padding: 0 13px;
      }
    }
    @media only screen and (max-width: 1100px) {
      .html_mobile_menu_tablet .main_menu {
        display: block !important;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #850181
    This reply has been marked as private.
    #850587

    Hi Nicole Scalessa,

    We are very sorry to hear that, the new version introduced the new modern menu and turned out to be a bit more challenging. We are here to help you. Do not copy the code above, it looks like you issue is a bit different.
    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #850665

    Hi Victoria,

    I inserted the new CSS into my child theme and the main menu is displaying as text again from 990-1100px and overlapping the logo. I instead would like the burger menu to trigger and display at screen widths under 1100px.

    Thanks again,
    Theresa

    #850929

    Hi Theresa,

    Yes, that’s exactly what the code does. Show the menu as text, but reduce paddings, so that the menu does not overlap the logo.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    
    @media only screen and (min-width: 991px) and (max-width: 1100px) {
      .html_mobile_menu_tablet .main_menu {
        display: block;
      }
      .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #851096

    Thank you for your help. That worked for mobile phones but tablet view is still wonky. The social icons are appearing in both the header and the top bar. The second set of social icons and the mobile menu are on top of the logo so it is difficult to see. How can I have tablet view act like mobile view?

    http://www.librarycompany.org

    Thanks,

    Nicole

    #851157

    Hi Nicole,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
    .main_menu ul.social_bookmarks {
      display: none;
    }
    div .logo {
      width: 80%;
      padding-top: 3%;
    }
    .header-scrolled.header-scrolled-full div .logo,
    .header-scrolled div .logo  {
      padding-top: 0%;
    }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #851174

    I replaced what I had with what you most recently provided and there is no change in tablet view. Menu, Search icon, and social media is all on top of the logo. Nicole

    #851249

    Oops, I was not understanding that part – It all makes sense now. I have all the CSS in place and the menu is switching to mobile before anything overlaps. Thanks for your help Victoria!

    Theresa

    #851254

    Why is this working for Theresa and not for me? My tablet view is still a mess.
    Nicole

    #851313

    Victoria is the expert… but in case it helps, here’s what I ended up pasting into my child CSS file. The main menu no longer overlaps our logo at certain tablet widths – the mobile burger menu displays instead:

    @media only screen and (max-width: 1100px) {
    .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
    .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
    .html_mobile_menu_tablet #mobile-advanced{display:block;}
    }
    @media only screen and (min-width: 990px) and (max-width: 1023px){
    .av-main-nav > li > a {
    padding: 0 5px;
    }
    }
    @media only screen and (min-width: 1024px) and (max-width: 1099px) {
    .av-main-nav > li > a {
    padding: 0 8px;
    }
    }
    @media only screen and (min-width: 1100px) {
    .av-main-nav > li > a {
    padding: 0 13px;
    }
    }
    @media only screen and (max-width: 1100px) {
    .html_mobile_menu_tablet .main_menu {
    display: block !important;
    }
    }
    @media only screen and (min-width: 991px) and (max-width: 1100px) {
    .html_mobile_menu_tablet .main_menu {
    display: block;
    }
    .menu-item {
    display: none;
    }
    .av-burger-menu-main.menu-item-avia-special {
    display: block;
    }
    }

    Theresa

    #851851

    Hi,

    @nscalessa: I checked the whole thread but I can’t find the login details. Please post it in the private field so that we can check the css modifications.

    @kvpacs: Thanks for sharing.

    Best regards,
    Ismael

    #852260

    Sorry, it is our policy not to share our login credentials with companies not under explicit contract that includes a non-disclosure agreement.

    Any help you can provide without access would be greatly appreciated. If there is a particular area of code you would like me to copy for your here I can.

    Nicole Scalessa

    #852477

    Hi,

    @nscalessa: The site looks ok on tablet view except for the duplicate social icons. Please add this code in the Quick CSS field.

    @media only screen and (max-width: 989px) and (min-width: 768px)
        .responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks {
            display: none !important;
        }
    }

    Best regards,
    Ismael

    #852648

    That worked Thank you! But I had to put in the edit CSS part of WP, t didn’t work in Quick CSS (nothing seems to).
    Nicole

    #852825

    Hi,

    That’s odd. Anyway, I’m glad that you figure it out. Let us know if you need anything else.

    Best regards,
    Ismael

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

The topic ‘Mobile main menu missing after Enfold update’ is closed to new replies.