Menu On IPad

[columbiaseo]

Hi, When viewed on the IPad, the menu drops below the logo and is on top of the slider/page menu/header items. How can we correct this?

Ex: http://orbisinc.seocolumbiasc.com/

Thanks,
Bethany

[Veena]

Pls include the following custom CSS in themeoptions-

@media only screen and (max-width: 1100px)
{
#site-logo a {
display: inline-block;
text-align: center;
}}
@media only screen and (max-width: 1100px)
{
#site-logo {
display: block;
float: none;
position: relative;
margin: 0 auto;
top: 0;
padding: 10px 0;
}}
@media only screen and (max-width: 1100px)
{
#header > .inner {
text-align: center;
}}
@media only screen and (max-width: 1100px)
{
#primary-menu {
display: none !important;
}}
@media only screen and (max-width: 1100px)
{
#mobile-menu, #mobile-menu-toggle {
display: block;
}}
@media only screen and (max-width: 1100px)
{
#site-logo a img {
max-width: 75%;
margin: 0 auto;
}}
@media only screen and (max-width: 1100px)
{
#header > .inner > .wrap {
min-height: 40px;
}}

[Morskate]

I have the same problem. Your solution only solves a small part of it. Because:
– after your fix the mobile menu animation doesn’t work anymore and becomes an overlay instead of pushing the page to the right
– the mobile menu button location comes in a strange place
– the logo is not centered like it is on a screen smaller than 768

[Veena]

Hi Morskate,

Pls open a new thread and also share temporary login credentials of your site as a private msg.

[Morskate]

I’ve expanded the mobile settings to a max-width of 1024 and this solved the problem. (I cut out all the css settings in betweet 767 and 1024. So it’s fixed. Took some time to figure out though 🙁

[Author]

Posts