IPad Menu Goes Under Logo

[worldlystrategies]

Hi Dante,

I cannot get my menu to look good on a horizontal iPad. I have tried everything.

I have tried shortening the words in my menu.
I have tried using Max Mega Menu Plugin
I have tried Mobile.Nav Plugin Menu

Nothing works. Can you please help me get my menu not to hide behind my logo on a horizontal iPad?

Thank you,
Worldly Strategies

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

In your case, we could look to trigger the mobile menu for landscape iPad’s.

Add this to your theme options CSS:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

#main-navigation {
    display: none;
}

a.visible-sm.visible-xs.mobile-menu-show {
    display: block!important;
}

.header-6 #logo, .header-7 #logo {
    width: 100%;
    padding: 0 15px;
    left: 0;
    height: auto;
    position: relative;
}

nav.search-nav {
    display: none;
}

#logo a {
    float: left;
}

}

[worldlystrategies]

Hi David,

Thank you for that CSS. Visually it looks great but when I click on the mobile menu hamburger button in landscape mode on an iPad it doesn’t expand or do anything. Can you please let me know how to fix that? Not sure what is happening here.

[David Martin – Support]

Great, yes I see that also.

I have additionally added this also and that will resolve it:

@media only screen and (min-width: 992px) {
    #mobile-menu-wrap {
        display: block;
    }
}

Thanks,
David.

[worldlystrategies]

Thank you that worked!

[David Martin – Support]

Smashing, no problem.

– David.

[joell-22]

Hello, I have the same problem but the code from above doesn’t help. Do you have an idea how to fix that?
Thanks in advance.

Joe

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi @joell-22,

Can you provide your site url?

-Rui

[joell-22]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Can you please insert the code again that was provided by David?
Thanks
Mohammad

[joell-22]

Inserted both codes into the Custom CSS in the Theme Options.

[joell-22]

The code is online now. Do you have an idea how to solve that problem?

[Rui Guerreiro – SUPPORT]

Hi,

I just forward to Mohammad so he can reply.

-Rui

[joell-22]

Hi there. When will I get an answer? The project is almost ready.

[Rui Guerreiro – SUPPORT]

Apologize for the delay.

Guess the only way to show it fine there is to decrease the font size.

Can you add the code below to your custom css option.

@media (min-width: 992px){
nav#main-navigation .menu li.menu-item > a {
    font-size: 15px!important;
}
}

Let us know the result.

-Rui