Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #820743

    Before the 4.1.1 update, due to the width of the main menu elements, I used CSS to switch to the mobile menu at 1150px via this code:

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

    This used to work fine but 4.1.1 has broken this because the whole structure of the menu has now altered and some of the old mobile menu classes have been changed.

    I cannot however work out how to get this working again in 4.1.1 – I have tried all sorts of variations of classes but nothing works. Please advise some new CSS to switch to the mobile menu at 1150px.

    (Purchase code hidden if logged out) -troubles/#post-820040″>This suggestion does not solve the problem because between 1150px and 990px the burger icon appears in the space where the normal menu was displayed as seen in this screenshot – plus the mobile search icon is missing.

    So, how to add the search icon with the burger at 1150px, and have the two of them in the ‘correct’ place from 1150px downwards, as seen here?

    • This topic was modified 4 months, 2 weeks ago by  zimbo.

    Hey zimbo,

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

    Best regards,


    Website is

    Custom CSS code added to try to get the mobile menu working at 1150 px is

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

    Use Chrome DevTools to see the problems:
    1. Search icon required when mobile menu displayed but adding #menu-item-search (display: block!important;} in the above media query has no effect.
    2. How to move the burger icon out of the ‘normal’ menu area between 1150px and 990px (and into its header position below 990px between these widths), and also to remove the ‘normal’ menu blank space (I think this might be .av-main-nav).

    [Or more simply, in Enfold > Main Menu, for Menu Items for Mobile, where it has options for Activate on browser widths below 768px or 990px, I want the mobile menu to activate “below 1150px”.]

    NB. This is not the only site where I need this fix. I have other sites where the client has requested a switch to the mobile menu at a higher width than Enfold’s 990px default (which is too low IMHO), usually being a fix for iPads and/or, as here, a lot of main menu top level elements.


    Hi zimbo,

    I am seeing the burger menu at 1102, so your styles are working.

    View post on

    You don’t have search on mobile either. That’s weird. 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 – yes the burger menu appears between 1150px and 990px but it’s in the wrong place. It’s positioned in the ‘normal’ menu space and it doesn’t move up until below 990px when it displays here and the ‘normal’ menu space is removed. I’d like the burger to appear in the top header area and the normal menu space to be removed from 1150px downwards so it’s consistent.

    Details in private content.


    Hi zimbo,

    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: 1150px) {
      .html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
        display: block;
      .html_header_top.html_bottom_nav_header #header_main_alternate .main_menu {
        display: none;

    If you need further assistance please let us know.

    Best regards,


    @victoria – I have a child theme and I’ve added the code into style.css but what do I do with this previous CSS?

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

    I’ve added the 2 lines into your CSS but between 1150px and 990px I now have:
    – burger menu top right where it should be but still no search icon
    – the space for the normal menu is empty but still visible

    and then between 990px and 768px the search icon reappears, the empty ‘normal’ space has gone but the top of the main page content & heading (“Welcome to the…”) is cut off… (and I had to add some CSS to fix .av-logo-container height, which if you remove it the heading reappears but the news ticker now runs over the top of the heading because .av-logo-container has not got enough height – try it in DevTools to see what happens)

    but below 768px everything is OK (but again I’ve had to add some CSS to fix #header_main height).

    PS. Trying to fix this would be an awful lot easier if the logo/header/menu classes were consistent but they seem to change between different screen widths… :-(



    Please insert this code at the very bottom of the css media query.

    #menu-item-search { 
        display: block !important; 
    .html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
        padding-top: 115px;

    This code should display the search icon and adjust the top padding of the main container.

    Best regards,


    There was still a problem with the search icon not showing but I have now got this working (I think and hope…) and am posting the final CSS so that anyone else who wants to do this might have an easier job implementing it than me. You’ll still probably have to tweak it but hopefully it will get you on your way. :-)

    I do have to say that the new burger menu is a nightmare to customise and a change to Enfold > Main Menu to allow user selection of when tablets and smartphones switch to the mobile menu, especially given the multitude of devices available these days, is now urgently needed in the theme.

    Change all references to 1150px to whatever screen width you want the burger menu to appear from above 990px.
    My normal desktop header is 116px high – responsive mode changes the header height & various paddings to all sorts of different values depending on the screen width – some consistency in the code would be good… ;-)
    Enfold > Burger/Mobile Menu Styling is set to #000000.
    The responsive search icon is 24px below 990px but this has to be specified between 1150px and 990px in custom CSS.
    This next line of custom CSS, quoted in a support answer elsewhere on a similar topic to this, is not needed and stops the search icon displaying –
    #top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none!important; }

    @media only screen and (max-width: 1150px) {
    #menu-item-search { display: block!important; }
    .av-burger-menu-main { display: block!important; }
    .html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main { padding-top: 116px; }}

    @media only screen and (max-width: 1150px) and (min-width: 990px) {
    .html_header_top.html_bottom_nav_header #header_main_alternate .main_menu { display: none; }
    .html_header_top .av_bottom_nav_header .av-logo-container .main_menu { display: block; }
    .html_mobile_menu_tablet #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; color: #000000; }}

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container { height: 116px !important; }
    .responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 116px; }}

    @media only screen and (max-width: 767px) {
    .responsive #header_main .container { height: 116px !important; }}



    Thank you for the info. I’m sure it will help a lot of users.

    Best regards,

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

You must be logged in to reply to this topic.