Menu on ipad/tablet

[eyetechoptom]

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

[Veena]

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?

[eyetechoptom]

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.

[Veena]

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.

[eyetechoptom]

This reply has been marked as private.

[Raghavendra]

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.

[Author]

Posts