Topic: Off Canvas Slideout Direction

David
September 17, 2023 at 5:28 am

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.

Thanks
David
September 17, 2023 at 7:31 am

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
David
September 17, 2023 at 9:35 am

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….

Thanks

Ying

September 17, 2023 at 11:51 am

Try this CSS:

.offside--right.is-open:not(.slideout-transition), .offside-js--is-right .offside-sliding-element {
    transform: translatey(100vh);
}
.main-navigation.offside {
    top: -100vh;
    right: 0;
}

David
September 17, 2023 at 12:52 pm

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.
Fernando
September 17, 2023 at 4:15 pm

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?
David
September 18, 2023 at 7:01 am

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 – https://prnt.sc/lpz-fU0ibQmz Off-canvas panel is set to On. In this screenshot https://prnt.sc/YnQZVALvrqK6 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.

Notes:
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 https://prnt.sc/UAg5CwnUFN6U

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.

Thanks
Ying
September 18, 2023 at 9:07 am

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.
https://docs.generatepress.com/article/block-element-site-header/
For your reference: https://app.screencast.com/CjKDZLRNIOCpV

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: https://app.screencast.com/clliTdcH15fAy
David
September 18, 2023 at 10:08 am

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. https://prnt.sc/lra-z3SsbWJx 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!!! https://prnt.sc/_bjvH9fLL9ul 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 🙂 🙂 🙂
David
Ying
September 18, 2023 at 11:00 am

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.
David
September 18, 2023 at 12:20 pm

You resolved this topic with Honors!!! Thank you again
Ying
September 18, 2023 at 1:18 pm

Happy to hear that 😛

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Off Canvas Slideout Direction