[Resolved] Mobile header breakpoint from 959px

[Janek]

Hi,
We are using Vertical menu on left and using CSS we managed to hide left sidebar from 959px. Now the problem is that mobile header kicks in if screen is 767px or less. Is there a way to make mobile header to be there until 959px?

PS! I am not talking about mobile menu but the whole mobile header 😉

Thanks,
J.

[Leo]

Hi there,

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

[Janek]

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.

[Tom]

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

[Janek]

Hi Tom,
Yes, sure. Code is removed.

Thanks,
J.

[Janek]

Great, seems to be working 🙂

Thanks

[Tom]

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;
    }
}

[Janek]

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.

[Tom]

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.

[Janek]

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.

[Tom]

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

[Janek]

Yes, site is here

[Tom]

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

[Janek]

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

[Tom]

Adjusted again – should be much better.

[Author]

Posts