Customize advanced hamburger, off canvas slide in menu for desktop & mobile

Hi there,

with some custom CSS could get the GP Offcanvas 80% of the way there to match the gatesfoundation menu.

Couple of elements easily covered:

1. Push screen across when navigation opens, this topic provides the CSS:
https://generatepress.com/forums/topic/slide-in-menu-that-moves-whole-site-to-the-left/#post-1130396

Note the -265px value used in attached CSS is for a right hand opening off canvas. For lefthand change value to 265px

2. Social Icons
You can use any plugin or shortcode template for your social icons and add it to the Off Canvas Widget area.

The rest will be CSS that is dependent on your nav set-up.

Happy to take a look when you set it up.

Aloha David!

Thank you! I will follow your guidance with custom CSS and short-codes. Curious - are there any third party plugins to consider that will help with header menu customization that Generate Press recommends?

Thank you so much and take care!
Aloha,
Chelsea

Aloha David -

Couple more things: - I added the CSS you recommended and now the menu pushes out from the left side of the website (thank you). The hamburger menu icon however is still in the far right side of the header. I'd like it to be on the far left side before the site logo (like the Gates Foundation website). I've tried many customization options but they don't seem to work. Any suggested paths to make this work. Also it would be nice if the header logo also slides with the "off canvas menu" so the site logo is always visible (like how the Gates site works). Thank you for your knowledge! Super appreciate your time!

Aloha!

Any chance you can share a link to the site where i can see the changes you have made ? Then i can advise on what else can be done.

Aloha!

I'm developing this site locally on DesktopServer. Can I send you some screenshot and can we make the images private (not shared on the support forum)?

If the above doesn't suffice I can launch it to a testing server. Let me know : )

Basically I can't get the hamburger menu to move to the top left (before site logo) of the header. FYI: I'm using the "Navigation as Header". I used the CSS you recommended and when I click the hamburger menu (which is on the right side) it opens the menu on the left side.

Thank you! All the best.

Launching it on a testing server would be much appreciated :)

Aloha Leo!

I've launched the demo site to a testing server for your review. Can we please make this reply "private" on the forum so the demo site url is only shard with Generate Press. Thanks!

// MOVED URL TO SITE URL FIELD IN ORIGINAL TOPIC //

Thank you for checking out the Navigation Header and how to best recreate the navigation / header design of the https://www.gatesfoundation.org/ hamburger menu on the left side with the menu slide in off canvas effect. Appreciate it!

I'm happy to give you admin access to the backend of this demo site - just let me know : )

Aloha!

Try this CSS instead:

.site,
.main-navigation {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

.slide-opened .site,
.slide-opened .main-navigation {
    -webkit-transform: translate3d(265px, 0, 0);
    -moz-transform: translate3d(265px, 0, 0);
    -ms-transform: translate3d(265px, 0, 0);
    -o-transform: translate3d(265px, 0, 0);
    transform: translate3d(265px, 0, 0);
}

.slideout-overlay {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

.main-navigation:not(.slideout-navigation) .main-nav,
#mobile-header .menu-toggle {
    order: -1;
}

Awesome! That worked!!

You guys rock!

Now I just need my search bar in the header navigation. It seemed to have disappeared with this CSS. I'd like to have it be very similar to the gatesfoundation.org search bar (located on the right side of header menu).

Additionally - if I end up needing to do this - what would be your recommended way to add text to the hamburger menu - for instance make it say "menu".

Thank you so much for troubleshooting this with me!
Aloha!

You can enable the Navigation Search in Customizer > Layout > Primary Navigation.

To add a label to the Desktop Hamburger menu just complete the Desktop Toggle Label field in Customizer > Layout > Off Canvas

Aloha David,

Thanks!

I double checked my settings for the Navigation Search and had that field enabled... but I found that I had a code in my Snippets that was overriding the search field. I deleted the snippet and now have a search icon but it is on the left side next to the hamburger menu. Can please advise on how I can add a customized search bar (similar to gatesfoundation.org) to the right side of the Header Navigation? Can I place a widget there or a Hook? I updated the website on the testing server to show what the Header Nav now looks like. Thank you! Thank you!

All the best!

This CSS to position the search to the right hand side:

.main-navigation li.search-item {
    position: absolute;
    right: 0;
}

And if you need it this CSS to limit the width of the search field,

.navigation-search.nav-search-active input[type="search"] {
    max-width: 300px;
}

the Search field colors can be changed in Customizer > Colors > Primary Navigation

Thank you David!

Sorry to not respond sooner... crazy world right now...hope all is well for you and GP Family.

I added the CSS you provided - thank you! Last thing for this topic: Is there a way to make the Search Bar be already in the open position vs. clicking the search icon to expand / show the search bar? Like how the gatesfoundation.com site search bar is visible in the header without clicking the icon. Thank you!

Unfortunately its not possible with the current GP Navigation Menu - might be something we review in the future.