Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 14, 2017 at 12:14 pm #838592
    oestersund

    HI,
    on my page http://www.praxis-christiane-moeller.de/ I´ve tried several css snippets to ensure the menu changes early enough (i.e. w/o overalapping into a 2nd row) into the hamburger button. But all of those did not work.. e.g. the current one:

    /* media queries */
    @media only screen and (max-width: 1040px) {
    .av-main-nav > li > a { padding: 0 11px; }}

    Also, I do not find on enfold 4.12 the “mobile” tab in the header configuration any longer – why? Where can I define this instead?

    thx a lot in advance & best regards, Tilman

    August 14, 2017 at 4:52 pm #838768
    Victoria

    Hey Tilman,

    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: 1100px) and (max-width: 1200px) {
  .av-main-nav > li > a {
    padding: 0 5px;
  }
}
@media only screen and  (min-width: 1201px) {
  .av-main-nav > li > a {
    padding: 0 11px;
  }
}

@media only screen and (max-width: 1099px)  {
.menu-item {
  display: none;
}
.av-burger-menu-main.menu-item-avia-special, #menu-item-search  {
  display: block;
}
 #menu-item-search {
   margin-right: 20px;
 }
 #header_main {
   min-height: 80px;
 }
}

@media only screen and (max-width: 767px) {
  .responsive #top .av-main-nav .menu-item-avia-special {
    width: 50px;
    height: 88px;
  }
  #header_main {
    min-height: 80px;
    padding-top: 37px;
}
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 14, 2017 at 4:56 pm #838780
    oestersund

    thx Victoria,
    hmm, the former CSS way was far more comfortable. Before V4.1. this was possible – why not now any longer?

    August 14, 2017 at 5:50 pm #838833
    Victoria

    Hi oestersund,

    I don’t have an answer to this question unfortunately. Does the code I gave you work for you?

    Best regards,
    Victoria

    August 14, 2017 at 6:28 pm #838862
    oestersund

    hi Victoria,
    I´ve added your code in the CSS and I see no effect.

    Although not working, I am still wondering why this codes needs to be that complex / long. For comparison, on another page I simply added according to a former topic the code below and this works like a charm (w Enfold 4.07)

    -> again, is V 4.1. different in this respect vs. 4.0x?
    -> Where has the “mobile” tab in the header configuration gone?
    -> another snippet that hopefully solves the issue?

    thx again for your effort / info

    Best regards, Tilman

    August 14, 2017 at 10:30 pm #838976
    oestersund

    in addition…
    Now the nav turns into hamburger menu, but:

    – too early, e.g. on iPad ist enough space for the menu, but it is not shown even in landscape

    – via the hamburger button I can only access 2nd level subpages (e.g.Mein Behandlungsansatz”, but not the 1st level main pages (as e.g. “Christiane Möller”

    – the menus in the footer (columns 1,2,3) disappear as well what they should not…

    Ideally, it shall be as on our page http://www.fitgutschein.de (enfold 4.07) – > how do I get this 1:1 here?

    It would be really great to get this solved as the page is now not really usable on mobile :-(

    thx lot & cheers!

    • This reply was modified 7 years, 3 months ago by oestersund.
    August 15, 2017 at 7:43 pm #839525
    oestersund

    Dear Team,
    Sorry for asking again, I warnt Not to appear pushy… but the page is barely readable at present. Would be superhelpful to geht an idea…

    Cheers, Tilman

    • This reply was modified 7 years, 3 months ago by oestersund.
    August 17, 2017 at 6:38 am #840242
    Ismael

    Hi,

    Please remove the modifications then go to the Enfold > Main Menu > General panel. Set the “Menu Items for mobile” to the second option then add the CSS code to force the mobile menu to display when the screen width is less than 1366px.

    @media only screen and (max-width: 1366px) and (min-width: 768px) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: block;
  }
}

    Best regards,
    Ismael

    August 17, 2017 at 6:22 pm #840561
    oestersund

    Hi Ismael,
    I did as proposed – 1 out of the 3 issues is still there:

    1) Still there – Hamburger too early, e.g. on iPad ist enough space for the menu, but it is not shown even in landscape

    2) Fixed (w/ other settings in the panel):: – via the hamburger button I can only access 2nd level subpages (e.g.Mein Behandlungsansatz”, but not the 1st level main pages (as e.g. “Christiane Möller”

    3) Fixed: – the menus in the footer (columns 1,2,3) disappear as well what they should not…

    What can I do to fix the remaining one 1) ? Re. the 1st one I played with the values w/o success

    Thx again very much in advance for your help, Tilman

    • This reply was modified 7 years, 3 months ago by oestersund.
    August 18, 2017 at 6:51 am #840758
    Ismael

    Hi!

    1.) It works fine on our installation. If you have an iPad Pro, the screen width should not exceed 1366px. Please try it again then don’t forget to remove the device’s browser cache because mobile devices tend to hard cache a page to save bandwidth.

    Regards,
    Ismael

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