Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 26, 2019 at 11:53 am #1130922
    Thina

    Hi,

    how can I change the browser width to below 680px as I have a lot of main menu items which overlap the logo?

    I tried the quick CSS which I found in Enfold Docs and changed the max-width to 600px:
    /* Activate burger menu */
    @media only screen and (max-width: 600px) {
    #top #header .av-main-nav > li.menu-item {
    display: none!important;
    }
    #top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
    }}

    but that didn’t work.

    Best regards
    Bettina

    August 27, 2019 at 5:51 am #1131194
    Rikard

    Hey Bettina,

    Could you post a link to where we can see the problem in question please?

    Best regards,
    Rikard

    August 27, 2019 at 9:02 am #1131252
    Thina

    Hey Rikkard,

    it is https://www.sbot.co.at
    but you have to switch to the german version as in the english version the menu items are not so long

    And would you pls tell me if you get the english version when you open the site. I don’t know how to test if that works by IP address when you open the site outside the german speaking countries.

    Thanks and best regards
    Bettina

    August 29, 2019 at 10:26 am #1131840
    Ismael

    Hi,

    Thank you for the update.

    You can set the mobile menu to display when the screen width is less than 989px. The option is located in Enfold > Main Menu > General panel. Look for the “Menu Items for mobile” settings. You can also use this css to adjust the font size of the menu items and the space between them.

    @media only screen and (max-width: 1024px) {
  #top #header .av-main-nav > li > a {
    font-size: 13px;
    padding: 0 7px;
  }
}

    Best regards,
    Ismael

    September 20, 2019 at 12:21 pm #1140200
    Thina

    Hi Ismael,

    I had set the mobile menu to display when the screen width is less than 989 px but that didn’t work.
    In addition I used your code – still did not work.

    When I turn my 12″ iPad to portrait mode the links of the main menu overlay the logo on the left side.
    When I use Safari /Developer/Responsive Mode to check different devices the iPad Pro 12″ has the same problem as my real iPad

    on the iPad Pro 10,5″ I get the burger menu in portrait mode but in landscape mode the links overlay the logo.

    Another Burger-problem:
    on iPhone 8 and even on bigger displays of another brand of my customer
    the loupe icon the 2 flags to switch the language and the 3 lines for the menu
    overlay the logo
    and underneath the header and above the hero header I get an empty blue frame which is the same hight as the header.
    Can I change the 3 lines to 3 dots – that would spare place
    and the start logo should be smaller
    as soon as I scroll and it shrinks it is o.k.

    Pls see the private content for credentials.

    Best regards
    Bettina

    September 21, 2019 at 8:47 am #1140423
    Vinay

    Hi,

    Thank you for contacting us.

    To activate the burger menu for custom screen size please check the documentation.

    Hope this helps, let us know if you have nay questions.

    Best regards,
    Vinay

    September 21, 2019 at 3:25 pm #1140464
    Thina

    Hi Vinay,

    thank you for the documentation which I studied thoroughly but it doesn’t really solve my problem.

    I guess I have to reduce the main menu links so that they don’t overlay on desktops.
    And on mobiles I’ll put the language switcher to the burger menu

    Best regards
    Bettina

    • This reply was modified 5 years, 1 month ago by Thina.
    September 23, 2019 at 6:22 am #1140832
    Ismael

    Hi,

    Thank you for the update.

    Did you add this css code as provided in the documentation? 

    /* Activate burger menu */
 @media only screen and (max-width: 1366px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}

    That will activate the mobile menu when the screen width is less than 1367px, which is the max view port width of an iPad Pro device. Please don’t forget to toggle the Performance > File Compression settings after adding the code.

    Best regards,
    Ismael

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