Docs

[Chris F]

Hey there,

I’ve done some customization to make the mobile menu appear at custom desktop resolutions. Also some styling like centering its position on phones.

For the most part, it’s working fine. But if you resize the browser to certain sizes, the right floating menu’s dropdown doesn’t appear at all. The icon appears just fine. I first noticed this on a landscape tablet screen. Portrait is fine. Not sure how I’ve managed that… any advice? Thanks!

http://mwh.cssdesign.ca/

@media only screen and (max-width:1300px){
 .x-nav-wrap.desktop {
   display: none;
 }
 .x-btn-navbar {
   display: block;
   float: right;
   margin-top: 46px;
 }
}

@media (max-width: 680px){
   .x-navbar .x-brand {
         float: none;
         display: block;
         clear: both;
         text-align: center;
    }
  
    .masthead-inline .x-btn-navbar {
       display: block;
       float: none;
       clear: both;
       width: 50px;
       margin: 15px auto 15px;
    }  
}

[Chris F]

This reply has been marked as private.

[Paul R]

Hi Chris,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

.x-nav-wrap.mobile.collapse.in {
    display: block !important;
}

Hope that helps.

[Chris F]

Paul, you’re a CSS Rock Star… thanks for the assist!

Chris

[Rahul]

You’re most welcome! 🙂

If you have anything further to ask, kindly let us know. We’d be happy to assist you with anything.

Thanks!

[Author]

Posts