[Support request] Mobile Breakpoint

[Martin]

I am trying to get the navigation menu to break to the mobile version much sooner (at around 1000 pixels rather than 768 pixels). I tried implementing the code here:

https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

Although the menu breaks to the hamburger perfectly, everything still drops below the site logo (unlike when I shrink the width of the browser below 768 pixels) — URL in private section.

How do I get the navigation panel to look just as it does when the browser window is narrower than 768 pixels but to get this to happen as soon as the window is narrower than 1000 pixels?

[Leo]

Hi there,

You are using the mobile header option so this is the code:
https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

This will be an in the next version of GP Premium so once that’s release, you can remove the code and just use the option (it’s a slider).

Let me know if this helps 🙂

[Martin]

Tried the new code, still the same issue unfortunately.

[David]

Hi there,

if you remove the first lot of code you used and add what Leo provided we can look at correcting the problem.

[Martin]

Weird, I thought I had pasted it in. I guess I hadn’t saved or something. In any case, the menu is now doing exactly what I want — thank you.

With that being said, the logo also shrinks down prematurely, along with the nav menu. Is there any way I can keep the logo behavior unchanged so it stays full size until the browser width hits the default breakpoint?

[Leo]

I’m not quite sure what you mean.

So the logo would be outside the container?

[Martin]

Umm… not sure. I just want the logo to look the same (ie not shrink) until the browser window gets to whatever GP’s default breakpoint is.

All I want is for the navigation bar (and search icon) to ‘break’ into the mobile version earlier than normal (at around 1200 pixels) — but for the logo behavior to remain as default. Does this make more sense?

[Tom]

Try adding this CSS as well:

@media (min-width: 769px) {
    .mobile-header-navigation .mobile-header-logo img {
        height: auto;
        position: absolute;
        width: 130px;
        left: 0;
    }

    #mobile-header {
        width: calc(100% - 150px) !important;
        margin-left: 150px;
    }

    #mobile-header .inside-navigation {
        position: static;
    }
}

Also, there was a bug with the mobile header CSS you added previously. You’ll want to re-add it: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

Let me know 🙂

[Author]

Posts