Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 30, 2018 at 5:27 pm #905011
    lanelee

    I am trying to change the mobile break point but it is not working. I have seen some posts to use this code now –

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

    It is removing the menu but the hamburger icon does not show until it gets down to 990px..

    February 1, 2018 at 12:47 am #905931
    Nikko

    Hey Lane,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    February 1, 2018 at 3:51 pm #906352
    lanelee

    I have a bit of custom CSS in the Quick CSS box that is all. Again I need a wider break point 1200px? I used the code above and the main menu dissapears at that point but the hamburger icon does not show to the screen gets smaller.

    Thanks for looking into this!

    February 2, 2018 at 5:39 am #906618
    Rikard

    Hi,

    Please try this CSS instead:

    @media only screen and (max-width: 1200px) {
  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

    February 2, 2018 at 2:55 pm #906856
    lanelee

    Rikard,
    No that does not work and did not seem to change anything. If you grab the browser window and slide it smaller you will see the main menu disapears but, no burger icon menu shows for some time. The 1200px break point just does not work correctly.

    February 4, 2018 at 10:13 pm #907589
    Basilis

    Hi,

    Try to use a different brake point

    Popular Screen Resolutions: Designing for All

    based on the screen resolution and it might work.

    Best regards,
    Basilis

    February 6, 2018 at 3:14 pm #908622
    lanelee

    I tired but, that has no effect on this. The site should be responsive correct?? The menu should show at all breaks and screen sizes. My menu IS NOT showing at all sizes. If you grab the screen and drag it down in size you will see that. All I am trying to do is increase the size of the first break point and make it 1200px wide. So I can fit the menu items on the top menu.

    February 6, 2018 at 8:34 pm #908785
    Basilis

    Hi,

    Can you check if you have the following code inside ( and remove it if so? )
    @media only screen and (max-width: 1024px) {
    .main_menu .avia-menu, #header_main_alternate, .fallback_menu{display:none;}
    .container #advanced_menu_toggle, #advanced_menu_hide{display:block;}
    }

    Best regards,
    Basilis

    February 6, 2018 at 10:05 pm #908832
    lanelee

    Basilis,
    I did not add that code.. The only custom css I have is what Rikard said to use above.

    Anything else I can try?
    Thanks,
    Lane

    • This reply was modified 6 years, 9 months ago by lanelee.
    February 7, 2018 at 7:36 am #908938
    Rikard

    Hi Lane,

    I’m not sure exactly what is going on there, but try this CSS as well:

    @media only screen and (max-width: 1200px) {
.av_menu_left .main_menu {
    left: auto !important;
    right: 0 !important;
}
.av-small-burger-icon {
    background-color:transparent !important;
}
}

    The social icons might not display after this, let us know if that is the case and we’ll have a closer look.

    Best regards,
    Rikard

    February 7, 2018 at 9:09 pm #909418
    lanelee

    Rikard,

    Thanks for looking at this it has me baffled.
    So I added that code with the code you gave me earlier. It does trigger at 1200px but it’s messed up. The Hamburger icon shows on the main menu bar.. – The main menu bar does not dissapear.. Attached image. I don’t want the social icons in the main menu area.. I really need to get this working asap.

    Thanks!!
    Lane

    • This reply was modified 6 years, 9 months ago by lanelee.
    February 8, 2018 at 6:07 am #909579
    Rikard

    Hi Lane,

    I saw the same thing and I don’t know why it’s doing that to be honest with you. It’s like something is corrupt or is being overridden by a customisation, but it doesn’t look like you have any customisations at all. We released a new version (4.2.3) of the theme yesterday, could you try updating to that please? http://kriesi.at/documentation/enfold/updating-your-theme-files/. We could fix all this for you with custom CSS, but it might make things a lot more complicated in the future, so let’s hope the new version takes care of things.

    Best regards,
    Rikard

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