Topic: Mobile Menu Broken on Tablet Only

Tagged: x

Author

Posts
March 12, 2017 at 12:39 pm #1403904

Amanda P
Participant

Hi x-team.

On this website: robustreds.ca

The mobile menu is broken only on landscape for tablets and small desktop screens. It works on Tablet Portrait view and mobile phone.

Can you help?

March 12, 2017 at 1:58 pm #1403945

Rupok
Member

Hi there,

Looks like you are using some custom CSS within media query that’s breaking the menu for certain screens. Maybe you want to show mobile menu for larger screen or something but hte code is not complete. Kindly remove them to get expected result.

Thanks!

March 12, 2017 at 2:37 pm #1403962

Amanda P
Participant

Yes, I want the mobile menu to appear sooner as the default styling does not show the mobile menu on tablet. If you see now, I have removed the code as you suggested and now on tablet the mobile menu is not visible. The menu and logo now stack and it looks horrible.

How can I have the mobile menu appear at 1258px or less? Thanks

March 12, 2017 at 9:37 pm #1404290
Rue Nel
Moderator
Hello There,

Thanks for updating in! To trigger the mobile menu to appear at around 1258px, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS
```
@media (max-width: 1260px){
  .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
  }

  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile.collapse {
    display: none;
  }

  .x-nav-wrap.mobile.collapse.in {
    display: block;
  }
}
```
Please let us know if this works out for you.
March 12, 2017 at 10:12 pm #1404311

Amanda P
Participant

Worked well, thank you!

March 13, 2017 at 12:29 am #1404415

Paul R
Moderator

You’re welcome! 🙂
Author

Posts

<script> jQuery(function($){ $("#no-reply-1403904 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>