Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 29, 2016 at 9:15 pm #693378
    sjahan

    Hi, I love the theme but I’m having an issue with the left sidebar navigation. It takes up way too much space on an iPad so how can I disable it on iPads/tablets? It’s disabled on mobile devices already, but I need to increase the cutoff screen size to also include iPads.

    I did receive a response from Yeet saying the following but it didn’t work. I even tried increasing the max-width to 1200px to see if that would help, no succes…

    FROM YEET:
    Hi!
    Please add following code to Quick CSS in Enfold theme options under General Styling tab
    @media only screen and (max-width: 990px) {
    .sidebar { display: none !important; }
    .content { width: 100% !important; border: none !important; }}

    September 29, 2016 at 9:18 pm #693380
    Yigit

    Hey sjahan!

    Do you mind creating a temporary admin login and posting it here privately? :)

    Best regards,
    Yigit

    September 29, 2016 at 9:20 pm #693382
    sjahan

    Yup will do!

    September 29, 2016 at 9:38 pm #693396
    Basilis

    Hey!

    Please do try the following CSS

    
@media only screen and (max-width: 990px) {
.sidebar { display: none !important; }
.content { width: 100% !important; border: none !important; }
}

    let me know if it makes any difference.

    Cheers!
    Basilis

    September 29, 2016 at 9:44 pm #693399
    sjahan

    Hi Basilis, no it doesn’t. That’s the same code that Yeet provided me as well…

    September 30, 2016 at 7:18 am #693543
    Jordan

    Hi,

    Please see – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

    That will should help switch form the sidebar nav to a mobile menu on the tablet. If you still have issues, let us know.

    Best regards,
    Jordan

    October 2, 2016 at 1:25 am #694263
    sjahan

    Hi, yes I am still having issues. The code enabled the mobile menu toggle bar (t’s cut off though since it’s really high on the screen) but the left sidebar is still there. What I need is to have the iPad screen display exactly like a mobile screen with the menu toggle on the top right and the logo in the top menu bar. Thank you!

    October 3, 2016 at 6:04 am #694428
    Jordan

    Hi,

    Please try the following CSS as well:

    
@media only screen and (max-width: 989px){
.responsive.html_header_left #main {
    margin-left: 0px;
}

#header_main, .html_header_sidebar .logo {
    border-bottom-style: none !important;
    border-bottom-width: 0px !important;
}

#advanced_menu_toggle, #advanced_menu_hide {
    top: 50px;
    left: 700px;
}
}

    Best regards,
    Jordan

    October 4, 2016 at 4:32 pm #695134
    sjahan

    Hi Jordan, that partially worked. I’m using this website (http://quirktools.com/screenfly/#u=http%3A//globalminervaalliance.com&w=768&h=1024&a=22&s=1) to test out the screen sizes and if you look at the iPad setting under tablets the menu toggle does show up on the right hand side now but the left sidebar with the logo is still there rather than enabling the mobile site. Also when you look at a 10″ desktop the toggle bar shows up in the middle of the page rather than being relative to the browser window size. And then the toggle disappears all together. I’ve also uploaded a video so you can see it better: https://youtu.be/EXrYlF9eJWs

    October 5, 2016 at 8:05 pm #695749
    sjahan

    Actually never mind. I changed the design so that I won’t need this modified anymore. Thank you though for your help.

    Instead, can you let me know how I can fix the fullscreen slider to not cut off the image in responsive mode? I currently have the slider disabled with the following code, but I’d much rather have the images displayed without cutting them off: 

    
/*Disable Homepage Slider Mobile Site*/
@media only screen and (max-width: 650px) {
    #fullscreen_slider_0 {display: none;
    }
}
    October 6, 2016 at 2:07 pm #696033
    Yigit

    Hi,

    You can refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/ and display a different slider on mobile which is optimized for mobile.

    Best regards,
    Yigit

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