Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 11, 2017 at 11:54 am #862831
    wurschmedia

    Hello

    Where can I define the responsive breakpoints.
    On a site for a customer the main menu is overlapping into the logo on the iPad Portrait-Mode.
    So I would like to switch into the burger menu sooner.
    What I found so far are answers on how to make the main menu disappear at 1024px but, then there is no burger menu until the width is 768px.

    I use Enfold 4.1.2

    October 12, 2017 at 6:51 am #863201
    John Torvik

    Hey wurschmedia,

    To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    Best regards,
    John Torvik

    October 13, 2017 at 10:23 am #863827
    wurschmedia
    This reply has been marked as private.
    October 16, 2017 at 6:34 am #864669
    Ismael

    Hi,

    Thank you for the update.

    Please go to the Enfold > Main Menu > General panel. Set the “Menu Items for mobile” to the second option then add the CSS code to have the mobile menu 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;
  }
}

    Remove browser cache or hard refresh before checking the page.

    Best regards,
    Ismael

    December 15, 2017 at 6:07 pm #889346
    Guenni007

    can you test this if it is working for header option (header_left : logo and menu on the left)

    i do not have any success on this

    – edit: oh no – i have the fixed frame layout :
    how to let this switch earlier ?

    • This reply was modified 7 years ago by Guenni007.
    December 16, 2017 at 4:19 am #889469
    Ismael

    Hi,

    There’s probably a better way but this is the easiest.

    @media only screen and (max-width: 1024px) {
  .responsive #top #wrap_all #header {
      position: relative;
      width: 100%;
      float: none;
      height: auto;
      margin: 0 !important;
      opacity: 1;
      min-height: 0;
  }

  .responsive #top #wrap_all .container {
      width: 85%;
      max-width: 85%;
      margin: 0 auto;
      padding-left: 0;
      padding-right: 0;
      float: none;
  }

  .responsive #header_main .container {
      height: auto !important;
  }

  .responsive #top .av-logo-container .avia-menu {
    height: 100%;
  }

  .responsive #top #wrap_all .main_menu {
    top: 0;
    height: 80px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
  }

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

  .responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
    min-width: 0;
    padding: 0 0 0 20px;
    margin: 0;
    border-style: none;
    border-width: 0;
  }

  .responsive #top .logo {
    position: static;
    display: table;
    height: 80px !important;
    float: none;
    padding: 0;
    border: none;
    width: 80%;
  }

  .responsive #top .av-main-nav .menu-item {
    display: none;
  }

  .responsive .logo img {
      margin: 0;
  }

  .responsive .logo img {
    height: auto !important;
    width: auto;
    max-width: 100%;
    display: block;
    max-height: 80px;
  }

  .responsive.html_header_sidebar #header .av-main-nav > li {
    margin: 0 10%;
  }

  .responsive.html_header_sidebar #header .av-main-nav {
    padding: 4% 0;
  }

  .responsive #top #main {
    padding-top: 0 !important;
    margin: 0;
  }

  .responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container {
    height: 80px;
    line-height: 80px;
  }
}

    Best regards,
    Ismael

    December 17, 2017 at 10:43 am #889760
    Guenni007

    thanks

    December 18, 2017 at 2:09 am #889883
    Ismael

    Hi,

    No problem. Let us know if you need anything else. :)

    Best regards,
    Ismael

    July 13, 2020 at 12:27 pm #1229928
    cyahome

    Hi there,

    this solution works great for me, thanks. How can I add the search icon to the right of the logo in this scenario? Any suggestions?

    Cheers, Cya

    July 13, 2020 at 7:25 pm #1230076
    Victoria

    Hi cyahome,

    Could you please give us a link to your website, we need more context to be able to help you.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    July 14, 2020 at 10:53 am #1230257
    cyahome

    Hi Victoria,
    attached you’ll find the mockup.
    Thanks and cheers, Cya

    July 14, 2020 at 7:58 pm #1230415
    Victoria

    Hi cyahome,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    July 15, 2020 at 9:25 am #1230536
    cyahome

    Oh, sorry. Forgot the link … it’s in the private content section.

    July 15, 2020 at 9:18 pm #1230730
    Victoria

    Hi cyahome,

    You need to have the search icon added to the header first.

    You can go to the Theme Options > Main menu and enable search:
    Image 2020-07-15 at 22.18.29.png

    Best regards,
    Victoria

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