Archived topic

Mobile Breakpoint

7 replies · Started by Martin on February 6, 2019

Viewing posts 1–8 of 8

February 6, 2019 at 5:45 pm #803526

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?

February 6, 2019 at 5:59 pm #803534

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 :)

February 6, 2019 at 9:53 pm #803621

Tried the new code, still the same issue unfortunately.

February 7, 2019 at 4:58 am #803848

Hi there,

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

February 7, 2019 at 9:42 am #804243

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?

February 7, 2019 at 4:25 pm #804514

I'm not quite sure what you mean.

So the logo would be outside the container?

February 7, 2019 at 4:28 pm #804516

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?

February 7, 2019 at 5:38 pm #804545

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 :)

This archived topic is closed to new replies.

Start building better websites today.