Home › Forums › Support › Customize advanced hamburger, off canvas slide in menu for desktop & mobile
- This topic has 37 replies, 2 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
March 10, 2020 at 1:53 pm #1191285Chelsea
Aloha!
I’m exploring best clean very light impact options to add an advanced hamburger menu with off canvas navigation to a new website I’m creating. I have two example sites representing the general style and functionality I wish to achiever with this menu: https://www.gatesfoundation.org/ and https://elevationchurch.org/.
Curious if Generate Press Premium (with customization) can create duplicate versions of these menus (especially gatesfoundation.org) OR is it best to implement a light super user friendly plugin that you recommend? I’m looking for the most effective, clean and user friendly way to add this navigation menu to Generate Press Premium theme (that uses Beaver Builder page builder). I look forward to your thoughts / suggestions. THANK YOU!
March 11, 2020 at 3:40 am #1191658DavidStaffCustomer SupportHi 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-1130396Note the
-265px
value used in attached CSS is for a right hand opening off canvas. For lefthand change value to265px
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.
March 11, 2020 at 12:51 pm #1192242ChelseaAloha 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,
ChelseaMarch 11, 2020 at 1:05 pm #1192254ChelseaAloha 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!
March 12, 2020 at 1:37 am #1192583DavidStaffCustomer SupportAny 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.
March 12, 2020 at 11:30 am #1193188ChelseaAloha!
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.
March 12, 2020 at 11:34 am #1193194LeoStaffCustomer SupportLaunching it on a testing server would be much appreciated 🙂
March 13, 2020 at 1:33 am #1193516ChelseaAloha 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!
March 13, 2020 at 4:28 am #1193624DavidStaffCustomer SupportTry 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; }
March 13, 2020 at 10:38 am #1194079ChelseaAwesome! 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!March 13, 2020 at 5:25 pm #1194258DavidStaffCustomer SupportYou 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
March 13, 2020 at 6:34 pm #1194287ChelseaAloha 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!
March 14, 2020 at 4:20 am #1194492DavidStaffCustomer SupportThis 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
March 23, 2020 at 5:25 pm #1207987ChelseaThank 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!
March 24, 2020 at 5:26 am #1208258DavidStaffCustomer SupportUnfortunately its not possible with the current GP Navigation Menu – might be something we review in the future.
-
AuthorPosts
- You must be logged in to reply to this topic.