Mobile Menu Shows Sooner, But Doesn't Work

Support
#1

Hi all,

This site:

Given the width of the menu, I want to have the mobile icon/menu show up sooner so the navigation doesn’t slide under the logo when shrinking screen size. I’ve seen many ways to adjust the cross-over point, this seemed easiest and works:

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

If you drag the browser window smaller, the desktop nav does switch to the mobile button. However, the button doesn’t work until you shrink the window quite a bit further. Feels like the CSS is doing the trick of “turning on” the mobile menu icon. But the underlying functionalilty is still waiting for a different cross over point (maybe 979?)

#2

Hello @stonerome,

Thanks for writing in!

Please be advised that our mobile menu will only appear once the screen size is below 980 pixels. If you want to display it in a larger screen size, you may need to update your custom css code and use this:

@media (max-width: 1150px){
  .x-nav-wrap.desktop {
    display: none;
  }

  .x-btn-navbar {
    display: block;
    float: right;
  }

  .x-nav-wrap.mobile.x-collapsed {
    display: block;
  }
}

We would love to know if this has worked for you. Thank you.

#3

So - I’ve put it in, the button works, but the mobile menu is toggled “on” right away.

#4

Hey @stonerome,

We’re sorry for not handling your expectation right. We do not support changing the breakpoint of the mobile nav in X. The X or Original Header was meant to be used for short menus. It would take a lot of overriding to achieve that.

Please upgrade to Pro instead so you can choose between 5 predefined breakpoints or even create your own breakpoints using Element CSS. I’ll be happy to help you with the setup even with a custom breakpoint if you choose to upgrade to Pro.

I’d really not recommend that you proceed with customizing the mobile nav breakpoint of X or the Original header because future changes in the theme might just break your customization like the custom code we provided in the past. If you still wish to proceed with customizing, you will need to hire a developer for customizing and maintaining the customization.

Thank you for understanding.

#5

Just making sure I understand. See the 3 screen grabs. We have this issue literally with about 40-50 X sites we host. There’s a funky middle ground where the nav wraps under the logo.

Our only remedy for this is to use Pro?

#6

Hello @stonerome,

You seem to have manage to remove the box shadow and border of the mobile menu icon. At the moment, I am already seeing this:

That is all made possible because you have added this custom css:

.x-btn-navbar, .x-btn-navbar.collapsed {
    background-color: rgb(117,81,141)!important;
    border: 2px solid;
    border-color: #d2d2d2;
    box-shadow: none;
}

.x-icon-bars:before {
    content: "▼";
    color: #fff;
}

Regards.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.