Mobile menu not appearing on site

Hey connect4consulting,

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){
    #top #header #header_main .widget {
        display: none;
    }
    .responsive #header_main_alternate {
        display: block;
    }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi connect4consulting,

If you want those text/logo, then replace this part of the code Victoria gave:

#top #header #header_main .widget {
        display: none;
    }

and replace it with:

#top #header #header_main .widget {
    display: block;
    padding: 12px 0 24px;
    text-align: center;
}

.responsive #top #wrap_all .main_menu {
    float: none;
    position: static;
    height: 55px;
}

.responsive #top .logo {
    display: block !important;
    margin-top: 0;
    width: 100%;
    height: auto !important;
}

this is what the whole code should look like:

@media only screen and (max-width:767px){
    #top #header #header_main .widget {
        display: block;
        padding: 12px 0 24px;
        text-align: center;
    }

    .responsive #top #wrap_all .main_menu {
        float: none;
        position: static;
        height: 55px;
    }

    .responsive #top .logo {
        display: block !important;
        margin-top: 0;
        width: 100%;
        height: auto !important;
    }

    .responsive #header_main_alternate {
        display: block;
    }
}

Best regards,
Nikko

Hi connect4consulting,

Can you try adding this css code as well:

@media only screen and (max-width: 989px) {
  .responsive #top .av_mobile_menu_tablet #header_main_alternate {
    display: block !important;
  }
  
  .responsive #top .logo {
    padding-top: 4px;
    margin-bottom: 0;
  }
}

Best regards,
Nikko

Hi,

I’m glad this was resolved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon