Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Off Canvas Slideout Direction

  • Hi Folks –
    Trust all is well.

    The off canvas slideout is available sliding in from left or right. Can it be configured to slide down after header or slide up before footer? I’ve seen several posts on this topic which wind up targeting CSS or JS. I’m open to either approach or even a PHP snippet.


  • Hi there,

    its “possible” but would require some CSS to do so.
    Do you have a site with the offcanvas in place that I can see, and which way do you want it to slide ? ( up or down ).

    I can then review if its possible

  • Yup – creds below. Preference is slide down from after_header. If you can provide the basic functional CSS to change slide direction, I can always target other properties in the slide_out. If I can do this, I’m going to structure the off-canvas panel with blocks….


  • Try this CSS:, .offside-js--is-right .offside-sliding-element {
        transform: translatey(100vh);
    .main-navigation.offside {
        top: -100vh;
        right: 0;
  • Hello Ying!!!

    Trust you’re doing well. I implemented the CSS and made some tweaks to it. Enough to figure out that this is going to do exactly what I want :-). I’ll have to fiddle with the different values, but that will be the fun part of it.

    If you get a chance, take a peek at it – you’ll see where I’m going with this. My landing page will be minimalist in nature with only the hamburger in the header on desktop and this solution will work very nicely.

    I’m trusting I can also use the CSS transition method to customize the transform:translate?

    My thought process is to create a custom header element for the landing page, and then a standard GP header for all the other pages with a GP/GB mega menu (from scratch I might add :-)). I may create a custom header for these pages but not certain of the value there. Your thoughts would be appreciated.

  • Hi David,

    Yes, you can add a transition code for transform.

    How different would your Header be for the Landing pages from other pages? Do you have a sketch so we can best recommend a good structure before you start editing with CSS?

  • Hi Fernando –

    Thanks for the transition info.

    Here’s the nav plan I’m looking to implement. I’ve set everything up in the customizer as you’ll see.

    Landing Page – Minimalistic. Essentially, I want a mobile menu layout on the landing page only with some tweaks to it. I used the following GP setting – Off-canvas panel is set to On. In this screenshot it’s pretty darn close to what I want.

    To get this look, I set the mobile breakpoint at 2000px and the Header>Mobile Header enabled. A couple issues:

    1. The max breakpoint in the GP customizer is 2000px. Screens wider than 2000px show the entire header/nav structure. I want to achieve this layout on the landing page only regardless of the media size.
    2. With Sticky nav enabled, the logo size is scaling up on scroll – I do not want this to occur.

    1. Slide-out will have primary nav menu block. I’m adding in a set of GP megamenu elements responsively styled with GB. I’ve got all the CSS selectors for sizing the panel.
    2. Nav menu source – primary nav. I’m pretty certain a secondary nav won’t be needed – but I’m open to using it if it makes sense.

    FYI – Here’s what I know I need to do to clean up the styling:
    1. Replace logo with svg.
    2. Add CSS to handle the spacing between search modal & hamburger. I have the CSS needed to do this.
    3. Take out ‘back to top’ button – with sticky nav, I don’t need it.

    All other pages – full featured nav in header

    Here’s what I did in the customizer to achieve this:

    1. Off canvas panel – mobile only. (I’ll need these setting ‘on’ for landing page on all media sizes)
    2. Mobile breakpoint – 768px
    2. Header Alignment – centered.
    3. Primary Nav – Below header

    In summary – I am looking to have one set of customizer settings with some tweaks for the landing page only. And another configuration of customizer settings for all other pages.

    In the ideal world, I’d like to have the ability to control all these settings with elements and then hook the custom header where needed. Based on what I’m trying to do, it may be part of the solution but here isn’t much flexibility in the GP header element construct.

    However you can help me out will be immensely appreciated. We’ll also wind up with a nice nav structure accomplished completely in GP/GB which is my goal.


  • Hi David,

    I would recommend to do so:

    1. As the customizer option is for the entire site, in the customizer, do the header configuration for the other pages, do NOT consider the front page.

    2. Create a block element – site header for the front page, you can add a site logo block and a GB button block with the menu toggle icon, and you can add the CSS class slideout-toggle to make it as the off-canvas menu toggle.
    For your reference:

    3. Add another button block for the search modal, and add a custom data attribute data-gpmodal-trigger = gp-search to make it trigger the search modal:
    For your reference:

  • Hi Ying –

    And we have another winner!!! I didn’t realize I could create a block element to replace the header (see what happens when I don’t read all the GP docs…). This changes everything. The solution is elegant and practical and allows the full GB Pro capability to be employed.

    I quickly popped open a block element and dropped some stuff in. I initially hooked to Page – Landing in the display rules. Of course, it didn’t work but when I hooked to General – Front Page, all is well.

    So, of course, I dabbled some more πŸ™‚ I see I can hook to any page, post, CPT and the like – but I can’t hook to the front page by the page name (Page – Landing) or the post set as the ‘posts’ post in the WP Reading settings. So, this all makes sense to me now πŸ™‚

    And, of course, I dabbled even more πŸ™‚ I see I can drop a nav block in that appears to be linked to the GP nav block and other theme blocks too!!! I did run into a bit of an issue, but was able to overcome it. I had a previous version of the mnuMain in the nav block. I had to clear it and reimport the mnuMain. It all works now and most of all, I understand why!!!

    Thank you so very much for your help and guidance and spending the time to show me the solution scenario. I am very grateful πŸ™‚ πŸ™‚ πŸ™‚

  • When a page is set to be the homepage and you want to choose it as an element location, you need to use front page , that’s why I used the front page in my last reply when referring to the landing page.

    Happy that works for you πŸ™‚ Glad to help!

    Let me know if this topic is resolved.

  • You resolved this topic with Honors!!! Thank you again

  • Happy to hear that πŸ˜›

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