Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 5, 2015 at 11:10 pm #498752
    Kloeppelweb

    Hi,

    Im using Enfold on my website but have a problem on smaller screens for example ipads. The menu is overlapping the logo. I have tried to set the header – mobile menu – browser width below 990px and tried different settings but it doesnt work. What can I do?

    Best regards
    Charlotte

    September 6, 2015 at 4:49 pm #498890
    Elliott

    Hi Kloeppelweb!

    Add this to your custom CSS.

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

    Regards,
    Elliott

    September 6, 2015 at 6:33 pm #498927
    Kloeppelweb

    Hi thank you for your mail. that didnt solve the problem?
    Still the same!

    September 7, 2015 at 8:37 am #499098
    Rikard

    Hi,

    Please try the following instead:

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

    Best regards,
    Rikard

    September 12, 2015 at 10:18 pm #502173
    Kloeppelweb

    Hi,

    I tried this and that also works by creating
    a mobile menu on iPads instead which is fine except for the fact that it’s not possible to open the mobile menu when using the ipad horizental. It only gives the user the opportunity to click on close button…

    September 13, 2015 at 10:39 am #502268
    Rikard

    Hey,

    Sorry about that, please try the following instead:

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

    Thanks,
    Rikard

    • This reply was modified 9 years, 3 months ago by Rikard.
    September 19, 2015 at 3:23 am #505823
    BrendaSarg

    This worked great for me only it’s a bit cramped up top. What can I do to nudge down my slider a bit?

    September 21, 2015 at 5:49 am #506201
    Rikard

    Hey,

    Not sure if you want it on all screen sizes or not, but you can try this in Quick CSS:

    #layer_slider_1 {
padding-top:60px !important;
}

    Regards,
    Rikard

    September 21, 2015 at 5:04 pm #506531
    BrendaSarg

    Hi there, no it’s only an issue for Ipads. Fine everywhere else.

    September 21, 2015 at 7:54 pm #506639
    Yigit

    Hi!

    You can change the code to following one to target tablets only 

    @media only screen and (max-width: 1024px) and (min-width: 769px) {
#layer_slider_1 {
padding-top:60px !important;
}}

    Regards,
    Yigit

    September 21, 2015 at 8:11 pm #506647
    BrendaSarg

    Perfect, thanks so much!

    September 21, 2015 at 8:37 pm #506662
    Yigit

    Hi!

    You are welcome, glad we could help!
    We will keep the thread open for the OP. If you have any other questions or issues, please start a new thread :)

    Regards,
    Yigit

    September 21, 2015 at 8:47 pm #506673
    BrendaSarg

    Oh darn it, I spoke too soon!

    It’s still WAY up here on the Ipad?

    http://quirktools.com/screenfly/#u=http%3A//birdingtrail.staging.wpengine.com/&w=768&h=1024&a=22&s=1 (hosted on WPengine)

    and no matter what I change the pixels to, it still stays that same spot?

    September 21, 2015 at 9:00 pm #506679
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 990px) and (min-width: 767px) {
#layerslider_3_1 {
    padding-top: 100px;
}}

    Regards,
    Yigit

    September 21, 2015 at 9:23 pm #506693
    BrendaSarg

    Thank you! I’m for sure done now :)

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Menu overlapping the logo on smaller screens and ipads’ is closed to new replies.