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

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

Viewing 15 posts - 1 through 15 (of 38 total)
  • Author
    Posts
  • #1191285
    Chelsea

    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!

    #1191658
    David
    Staff
    Customer Support

    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.

    #1192242
    Chelsea

    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

    #1192254
    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!

    #1192583
    David
    Staff
    Customer Support

    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.

    #1193188
    Chelsea

    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.

    #1193194
    Leo
    Staff
    Customer Support

    Launching it on a testing server would be much appreciated 🙂

    #1193516
    Chelsea

    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!

    #1193624
    David
    Staff
    Customer Support

    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;
    }
    #1194079
    Chelsea

    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!

    #1194258
    David
    Staff
    Customer Support

    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

    #1194287
    Chelsea

    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!

    #1194492
    David
    Staff
    Customer Support

    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

    #1207987
    Chelsea

    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!

    #1208258
    David
    Staff
    Customer Support

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

Viewing 15 posts - 1 through 15 (of 38 total)
  • You must be logged in to reply to this topic.