Mobile menu does not fold out when changing breakpoint

[Anderegg]

Hi all,

I am trying to change the mobile breakpoint on the bullilust.de website by adding the following custom css:

@media (max-width: 1300px){
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.collapse.in {
display: block;
}
}

This works fine, except that the menu does not fold out in landscape view on my iPad Pro when clicking (works fine in portrait mode or on iPhone and so on). Anyone have any ideas?

thanks for your help!

[lely]

Hello Phil,

Try using a media query specific for iPad Pro.

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.collapse.in {
display: block;
}
}

As you see, your current code will work for 1300px screen width and below. Ipad Pro landscape with is 1366px.
This might also help: http://stephen.io/mediaqueries/

[Anderegg]

Hi Lely,

thanks for your help. Unfortunately I still have the same problem. When I click on the “hamburger menu” the menu does not fold out. Maybe another CSS is interfering, I’ll have to go search for the problem I guess

best regards
Phil

[jade]

Hey Phil,

Please use this code instead:

@media (min-width: 1300px) {

    .x-nav-wrap.desktop {
        display: none
    }
  
    .x-nav-wrap.mobile {
        display: block
    }
  
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
  
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right
    }
  
    .masthead-stacked .x-btn-navbar {
        display: inline-block
    }
  
    .x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto
    }

}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

[Anderegg]

Hi Jade,

thanks for your help. That did the trick I had to switch out the min-width with max-width because otherwise the “hamburger” was being displayed on all screen sizes. It works very well now though

[jade]

Glad to hear it’s sorted, Phil.