Collapse menu to mobile menu (at smaller screen sizes)

[flittrst]

Hi there,

in the past I got some advice from the support (back in the days of the previous support forum) how to collapse the header menu, when the screen size is to small.

I want to collapse my menu, so that there is no break like it does right now:

https://www.adsventure.de/wp-content/uploads/2018/05/menu.png

Can you tell me how to fix that?

My website is https://www.adsventure.de/

many thanks!

[flittrst]

Hi - please close this topic. I’ve found a solution here: https://theme.co/apex/forums/topic/force-mobile-menu-to-appear/

thanks!

[basanta]

Hi There,

Thanks for the confirmation!

Thanks

[flittrst]

Hey, sorry to interupt again but the solution didn’t worked completely

If I am using this code:

/* switch to mobile menu */

@media only screen and (max-width:1040px){
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.in,
.x-nav-wrap.mobile.collapsing {
display: block;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: relative;
top: 0;
}
}

The mobile menu can’t be opend unless I reduce my screen size to 979px. Any ideas to prevent this?

[nabeel]

Hi again,

Please replace your code with the following one:

@media screen and (max-width: 1300px) {
  a.x-btn-navbar {
    display: block;
    float: right;
  }

  nav.x-nav-wrap.desktop {
    display: none;
  }
  .x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
  }
}

You can adjust the break point as per your need. Cheers!

[flittrst]

Awesome, works like a charm! Thanks

One last, small glitch. I’ve tried to add a top-padding to the collapsed mobile menu, so that it isn’t overlapping with my logo. This worked in the past, but doesnt work now:

.x-nav-wrap.mobile.collapse.in {
padding-top: 20px !important;
}

Would be awesome if you could help me with that, too <3

[paul.r]

Hi,

You can try this code instead.

@media (max-width: 979px) {
.x-nav-wrap.mobile {
    margin-top: 90px;
}
}

Hope that helps

[flittrst]

Perfect! Thank you so much!

[Alaa]

You are welcome