Mobile header breakpoint from 959px

Hi there,

Give this a shot: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

Hi Leo,
Thank you for your quick reply. I added the code you pointed out but it is not working. It creates a mobile menu (not mobile header) and clicking on the hamburger icon does nothing. AND: f this code is applied the regular mobile header menu is also not working.

See short screencast here.

Take a look at the site which is here.

Thanks,
J.

Any chance you can remove that code and let me know? I think we can simplify it quite a bit.

Hi Tom,
Yes, sure. Code is removed.

Thanks,
J.

Great, seems to be working :)

Thanks

Something like this should do:

@media (max-width: 1000px) {
    #mobile-header,
    #mobile-header .menu-toggle {
        display: block;
        position: relative;
        z-index; 10;
    }

    #mobile-header:not(.toggled) .main-nav > ul {
        display: none;
    }

    #mobile-header .main-nav ul li {
        float: none;
    }
}

Hi Tom,

Thank you for your quick reply. It is working although a bit differently than the one which kicks in from 767px. See screenshots:

Original mobile header https://s.nimbus.everhelper.me/attachment/1151526/z42t3zu7x7y7s4hccw36/231843-zEEzodJd2mPxudGr/screen.png

New mobile header https://s.nimbus.everhelper.me/attachment/1151524/n03yp11pe6xlfw25sm14/231843-3b6O16l88f61Wpu8/screen.png

As you see the new one has a menu toggle below logo. Also cart and search functions open when menu toggle is pressed. Original mobile header has menu toggle on right and cart+search icons are visible.

Is there a tweak whick makse those icons to align and be visible as original mobile header does?

Thanks again.
J.

There actually is a GP branch that allows us to set the width as a Customizer option.. I just need to get these next couple versions of GP out first before I can merge and release it.

Can you show me again what happens when you use the original CSS from the documentation article? You can use a staging site if you can't do it on that live site.

Hi Tom,

For the example i commented out latest code you provided and added code from this article https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

As you see now it acts like this https://www.screencast.com/t/Vlr3wdnyAJ

The latest code you provided: is there a way to tweak it in a way that mobile toggle is not below lobo but floated right?

Thanks again.

Is there a link to that example in the video? I think it's close, just missing something small.

Yes, site is here

Can you try this updated gist?: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

Almost :)

Toggle works great but if i open menu toggle then menu items are inline and cart+search icon are there twice. See here

Thanks

Adjusted again - should be much better.