Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 5, 2017 at 12:26 pm #729830
    Wansink

    Hello,

    I’ve created a website with a sidebar menu. I want to adjust the responsive settings so that the menu on a tablet (iPad) changes to the same view as on a smartphone (iphone). The small stripes at the right.
    I also want the content been showed on the same way as on the smartphone.

    Where can I adjust the responsive settings on a safe way.

    Thanks in advance!

    January 6, 2017 at 5:39 am #730165
    Rikard

    Hey Wansink,

    Please try the following in Quick CSS to activate the mobile menu for tablets as well:

    @media only screen and (max-width: 1024px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
}

    I’m not sure what you mean by your content though, could you try to explain a bit further please?

    Best regards,
    Rikard

    January 6, 2017 at 10:12 am #730249
    Wansink

    Thank you, but this is not the solution i’m searching for.
    On the iPhone the sidebar with menu disappears and the mobile menu shows.
    The content is shown underneath. This is what i want on my tablet.

    January 9, 2017 at 6:20 am #730977
    Ismael

    Hi,

    Thank you for the update.

    Please add this in the Quick CSS field.

    @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;
}

.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}

.container #advanced_menu_toggle, #advanced_menu_hide {
    display: block;
}

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

    Best regards,
    Ismael

    January 19, 2017 at 10:27 am #735769
    Wansink

    Excuse for the delay in response.
    But your code isn’t the solution.
    Still there is a sidebar.
    I want the same views as on the iPhone but then on the iPad.
    Some where in the Enfold code there must be a filter where you can define the platform (computer, tablet or smartphone) on which the website is displayed. This is what I want to adjust.

    Thank You for your patience and help.

    January 23, 2017 at 6:48 am #737117
    Ismael

    Hi,

    The css code should force the theme to display the iPhone layout on iPad view. Are you sure that you’re not looking on a cached version of the site? Please post the login details so that we can check the css modification.

    Best regards,
    Ismael

    February 7, 2017 at 12:04 pm #743838
    Wansink

    Hi,

    I have tried many things but nothing works. Maybe you can take a look. I provide a account for your access.
    Thanks in advance.

    February 13, 2017 at 1:52 am #746081
    Nikko

    Hi,

    Thanks for providing the login, I have added this css code in Quick CSS (located in Enfold > General Styling):

    @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;
  }

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

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

  .responsive .logo a {
    display: table-cell;
    vertical-align: middle;
  }

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

  .responsive #header_main .inner-container, 
  .responsive .main_menu {
    position: static;
  }

  .main_menu .avia-menu, #header_main_alternate, 
  .fallback_menu {
    display: none;
  }

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

  .container #advanced_menu_toggle, 
  #advanced_menu_hide {
    display: block;
  }

  .responsive.html_header_sidebar #top #header .social_bookmarks {
    display: none;
  }
}

    Let us know if it’s good :)

    Best regards,
    Nikko

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