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


    I’m working on a new website using your enfold-child theme, with the restaurant demo. My main menu was overlapping the logo so I added in this code so that it switches to the mobile menu at the right time (1230px). I was wondering, is there a way to show a different menu as the screen gets smaller. So as each item overlaps the logo, a menu item is removed.

    so something like, when the screen is below 1200px, display ‘menu 2’ (which will have less menu items). and so on so forth until the mobile icon as a last option.

    Many thanks,


    Hi Coronacom!

    “Coming Soon” page is active. Do you mind posting a temporary login to your website so we can see overlapping issue to provide you custom CSS code?

    Best regards,

    This reply has been marked as private.

    just to let you know, i removed the code i added to custom css that made the mobile menu appear before overlap.



    Sorry but still cannot see your pages as user role is not administrator. Can you please change user role to administrator?

    Best regards,


    oh sorry, updated now for you!




    Please add following code to Quick CSS

    @media only screen and (max-width: 1200px) and (min-width: 1090px) {
    .av-main-nav > li > a { padding: 0 6px; }}
    @media only screen and (max-width: 1090px) and (min-width: 990px) {
    strong.logo * { max-width: 85%; }}

    Best regards,


    Ok, thank you.

    Is it possible to change the mobile menu when it pops out so that it only covers around 30% of the screen on the right hand side, and you can still see the 70% of content?


    How do I display my secondary menu (called ‘menu_2’) when max-width:1080px; min width: 800px;

    • This reply was modified 9 years, 8 months ago by Coronacom.


    for menu:

    #mobile-advanced {
    width: 70%;

    secondary menu:
    do you mean you want to display it instead of menu1? or additionally?



    great, thank you that worked perfectly!

    I was thinking… display menu 1 when the screen size is above 1080px wide.

    Show menu 2 when the screen size is between 800 and 1079px wide

    then show the mobile menu on screen sizes below 799px wide.

    Is that possible?




    You can add this below to hide the secondary menu on 1080px above then show it when screen size is between 800px and 1079px:

    @media only screen and (min-width: 1080px) {
    ul#avia2-menu {
    display: none;
    @media only screen and (min-width: 800px) and (max-width: 1079px) {
    ul#avia2-menu {
    display: block;
    ul#avia-menu {
    display: none;


Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.