Menu on ipad/tablet

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #26941
    Eyetechoptomeyetechoptom
    Participant

    Hi

    1. when I look at my menu on ipad it is on the line below the logo and aligned left so it is below the logo (on the PC it is on the same line as the logo). I changed the font size but can never get the menu on the same level and aligned to the right. Interestingly on the ipad teh floating menu shows correctly. I cant figure out the correct custom css.

    2. the floating menu on the ipad has a orange line under the menu but it does not align with the bottom of the floating menu. On the PC it is fine.

    Please can you help, the website is http://www.optimed.co.uk

    thanks

    Trusit

    Attachments:
    #26946
    VeenaVeena
    Moderator

    1. Pls have the below custom CSS in themeoptions and check –

    @media only screen and (max-width: 1024px){
    #primary-menu > ul.menu > li > a {
        font-size: 14px;
        padding: 0 12px 0;
        line-height: 60px;
    }
    #primary-menu {
        float: right;
        margin-right: 0 !important;
        padding-top: 15px;
    }
    #site-logo {
        top: 40px;
    }
    }
    

    2. I don’t see any issue. Is this resolved?

    #26948
    Eyetechoptomeyetechoptom
    Participant

    Hi

    on ipad landscape the issue is still there. On ipad portrait the menu text is not in the middle of the logo height. Also the menu height overall is much bigger than it was.

    #26951
    VeenaVeena
    Moderator

    Can you pls try the below modified custom CSS –

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    #primary-menu > ul.menu > li > a {
        font-size: 14px !important;
        padding: 0 12px 0;
    }
    #primary-menu {
        float: right;
        margin-right: 0 !important;
        padding-top: 15px;
    }
    #site-logo {
        top: 60px;
    }}
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    #header.sticky #primary-menu > ul.menu > li > a {
        line-height: 100px;
    }
    #primary-menu > ul.menu > li > a {
        font-size: 14px !important;
        padding: 0 12px 0;
    }
    #primary-menu {
        float: right;
        margin-right: 0 !important;
        padding-top: 15px;
    }}
    

    You may need to adjust the values.

    #26956
    Eyetechoptomeyetechoptom
    Participant
    This reply has been marked as private.
    #26958
    RaghavendraRaghavendra
    Moderator

    I am afraid there is only one solution to this issue since the PC resolutions and tablet resolutions converge as tablet screens become larger and support bigger resolutions. What you need is a way to know if the device is ipad and then target the styling accordingly. Pls have this line in your child theme functions.php file –

    add_filter('body_class', 'mo_browser_plus_device_body_class');

    which will add a class named ipad to body tag. You would then have all the custom styling inside like this in the custom css –

    body.ipad #primary-menu > ul.menu > li > a {
    ...
    }
    body.ipad #primary-menu {
    ....
    }

    Hope this works for you.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Agile Theme Support’ is closed to new topics and replies.