Code for creating push navigation

Can anyone recommend custom code/plugin for creating a push navigation similar to this site? https://workhiveslc.com/

I'm using the Brine Template and am assuming it'll need to be code injection for the header. Maybe someone knows of a site offering or selling the plugin code? I know I can mimic this - sort of - by forcing the mobile hamburger to desktop by increasing the mobile breakpoint, but that means the menu background covers the entire desktop screen. Hoping to find partial coverage code.

Thank you!

4 hours ago, gleemedia said:

forcing the mobile hamburger to desktop by increasing the mobile breakpoint, but that means the menu background covers the entire desktop screen.

Hi @gleemedia

This is some of the code I used:

@media only screen and (min-width: 640px) {
.Mobile-overlay-menu {
                                width: 55vw;
}
.Mobile-overlay-nav {
                                padding-left: 2em;
}
.Mobile-overlay-nav-item {
                                font-size: 4vw !important;
}
.Icon--close {
                                display: none !important;
}
}

Hi @MagneM  Thank you - assuming I'll need to kick up the mobile breakpoint for this to work? 

Hi @gleemedia Set it to something like 6000px in Site Styles. Let me know how it goes

Hi @MagneM - This is great, thank you -you rock! One other quick thought... any idea how to change the Mobile Menu Backdrop Color to an image instead of a color?

Hi @gleemedia

I'm glad I can help 🙂

First you need to upload an image to the CSS Editor.
Learn how:
https://support.squarespace.com/hc/en-us/articles/206545567
It should be at least 2500 x 1440px, and max 100kb.

Your code will look like this:

.Mobile-overlay-back {
                     content:
                     url(your image);
}

@MagneM THANK YOU SO MUCH! Before you wrote back I was trying this wording to no-avail ".Mobile-overlay-background" or ".Mobile-overlay-backdrop" .. I should have known it was "back" ... so thank you again, it worked great!