Make mobile menu appear sooner? renew stack

[COK]

Is there an easy way to force my site’s mobile menu to appear sooner (around 1080px)?

Right now it’s bumping down to a second line at smaller breakpoints before the mobile menu appears:

Renew stack.
Site: https://tinyurl.com/yb36nzoe

Thanks.

[basanta]

Hi There,

Thanks for writing in!

Please add following CSS to your Theme Option -> Global CSS and let us know how this goes.

@media (max-width: 1080px) {
  .x-nav-wrap.desktop {
display: none !important;
}
.masthead-inline .x-btn-navbar {
display: block !important;
}
}
```

Hope this helps!

Thanks

[Prasant]

Hello @COK,

Thanks for asking.

Another staff here. Apologies for chiming in. I just came across this ticket and while checking the website on certain resolutions hamburger menu might take up whole screen width. You can try out following CSS in Theme Options > CSS:

@media only screen and (max-width: 1130px) {
   nav.x-nav-wrap.desktop {
    display: none;
}

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

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

Thanks.

[COK]

at the first breakpoint, the logo shrinks and the navmenu does not expand when it’s clicked.

[jade]

Hi there,

Apologies for the confusion. Please remove the previously suggested code then try this:

@media (max-width: 1149px) {
    .x-nav-wrap.mobile {
        display: block;
    }

    .x-nav-wrap.desktop,
    .x-nav-wrap.mobile.x-collapsed {
        display: none !important;
    }

    .masthead-inline .x-btn-navbar {
        display: inline-block !important;
        float: right;
    }
}

Your main menu falls below the logo at 1149px screen width so that is what I set on the code. Feel free to change the breakpoint.

Please also check the codes that is in your Global JS as there is an error: add_filter is not defined

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[COK]

It sort of works, but it makes the mobile menu behave differently. When clicked, the mobile menu doesn’t immediately expand… it hesitates for a second, and then expands. Why is this? It’s noticeably slower than it was before (and slower than all of my other X installs). When I remove this code, the menu expands quickly.

[jumar]

Hello there,

Let us try this workaround instead. Please replace the code to this:

@media (max-width: 1149px) and (min-width: 980px) {
     .x-nav-wrap.desktop {
        float: left;
     }
    .masthead-inline .x-btn-navbar {
        display: none;
    }
}

Hope this helps.

[COK]

the mobile menu opens quickly again, but it looks like i’m back to square one in the sense that the menu is once again bumping down to a second line at some break points:

0px through 980px looks good (mobile menu appearing) and everything larger than 1135px looks good (no line break in the nav links).

it looks like the width that is problematic is roughly: 980px through 1134px.

[paul.r]

Hi,

Please change the code provided above with this.

@media (max-width: 1149px) {
    .x-nav-wrap.mobile {
        display: block;
    }

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

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

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

Hope that helps.

[COK]

Now works perfectly. Thanks.

[smartdataseo]

I’m having a similar issue on https://dgpo.org, where at middle-breakpoints, the menu falling to a second line is causing the title text to be covered.

[paul.r]

Hi,

To fix it, you can add this in Theme Options > CSS

/* Make mobile button appear sooner */
@media (max-width: 1248px) {
.x-nav-wrap.desktop {
    display: none;
}

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

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

.masthead-stacked .x-btn-navbar {
    display: inline-block;
}

.masthead-stacked .x-navbar {
    text-align: center;
}
}

Hope that helps.