How to show Menu Items on iPhone

Discussion in 'Compass WordPress Theme' started by jbmportillo, Aug 21, 2014.

Thread Status:
Not open for further replies.
  1. jbmportillo

    jbmportillo New Member

    Joined:
    Jul 31, 2012
    Messages:
    20
    Likes Received:
    0
    Please see figure. Instead of this ugly way to get to the menu, how come the menu shows on an iPad, but not on an iPhone. It seems this theme is not well suited for iPhones.... Please help. Website: babymaxcare.com
    Thanks
     

    Attached Files:

  2. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    Paste following CSS in Custom CSS and Save all changes.
    Code:
    @media only screen and (device-width: 640px) {
    div#MainNav #menu {
    display: block  !important;
    }
    }
    That will resolve your issue.

    Thanks & Regards
    Yogesh Bhade
     
  3. jbmportillo

    jbmportillo New Member

    Joined:
    Jul 31, 2012
    Messages:
    20
    Likes Received:
    0
    Nope -- this did not resolve the issue. I will post a new thread with all the CSS recommendations for several iPhone issues that are not working...

    Thanks
     
  4. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    To show menus in iPhone paste following css in Custom CSS and save it.
    Code:
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px) { 
    display: block !important;
    float:left;
    }
    That will resolve your issue.

    Thanks & Regards
    Yogesh Bhade
     
  5. jbmportillo

    jbmportillo New Member

    Joined:
    Jul 31, 2012
    Messages:
    20
    Likes Received:
    0
    Thanks !! It works for a few seconds, and then the menu disappears. You can see this behavior when you launch the babyMaxCare website on an iPhone. The code above was pasted at the very end of the CSS code. Any suggestions?
     
  6. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    Paste following CSS in Custom CSS and save all changes.
    Code:
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px) {
    div#MainNav #menu{
    display: block !important;
    float:left;
    }
    }
    
    That will resolve your issue.

    Thanks & Regards
    Yogesh Bhade
     
  7. jbmportillo

    jbmportillo New Member

    Joined:
    Jul 31, 2012
    Messages:
    20
    Likes Received:
    0
    GREAT !! That did it !! Many thanks!!!
     
Thread Status:
Not open for further replies.

Share This Page