[Support request] Off Canvas Menu Open Element in Header

[Tim]

Hello!
I have been using GP Pro for a few years now, and I really enjoy it and have already learned so many things going through your support forum and otherwise. Great job!

I have read all I can find on the off canvas menu, but, I wasn’t able to find a satisfactory answer. It’s possible your answer might be “this is HTML/PHP help with basic support” or even worse, “this is advanced custom coding,” but at least you can tell me if you’ve addressed this before or where to look.

I’m using the Off Canvas Location to hold my login and user account links (I am a bit foggy on the right words: block, widget, elements, etc.), but for now, I’ve done it with a shortcode. I used to have these items in the secondary nav above the header, but I want to display more links and content with regard to “member stuff” (e.g., profile, membership, billing, cart, etc.) along with my login menus (which I’ve recently changed over to AJAX, which has been received with high praise), and it’s just too much for a menu nav bar, in my opinion.

I was able to add to link in the upper nav to open the Off Canvas menu (yes, I want this menu to always display my custom content on desktop and mobile – I’m separately dealing with loss of main nav under header on mobile, but I know how to work with that, I just haven’t yet). I feel there’s a disconnect though between clicking the hamburger + “Login/Account” link in the upper nav and the off canvas menu.

What I’d like is an element that hovers on the right of the header. Perhaps a <div> that approximately stays in the same place on desktop, hides in mobile, that has a FA icon and text link, which is what opens the off canvas menu.

I mocked it up in these images. Here’s an example of what I’d like to do:

Clicking the “Login/Account” icon/text in this div slides the Off Canvas Menu open, then this div disappears until the menu is closed, like this:

Have you helped anyone with this type of request. Honestly, I don’t even know where to start. From within GP, I don’t see how/where I can “add a random bit of HTML” that achieves what I want.

Thank you in advance for your time!
Tim

[Tim]

Hi There,

Just to add some more to my original post – I have been trying things and exploring.

I just purchased Generate Blocks Pro – thinking I could use this to make my own “header button” block. Which I have done. Then, it seems separately, use Elements –> Hook. But now, I don’t know how to use the “header button” block I created as a Local Pattern. Maybe these don’t connect? In that case Generate Blocks Pro is just a professionally developed block developer for use in pages and posts (like the default Gutenberg “Create Reusable block”)>

Well, I’m getting closer.

I added a block widget to the header area. The problem is, the block inherits the header styles on Theme –> Layout –> Header, Header Alignment. I have that as Center, which is what I want for the site name and logo, but I don’t want the new widget to be centered. I suppose I could override the styles with CSS, but that seems a bit kludgey. Can I add a header element without it inheriting the presets in the customizer?

Also, maybe you’ll have additional thoughts and feedback, but I wanted to let you know a couple ways I have tried this so far.

Thanks!
Tim

[Tim]

Hi There,

Gee, I’m sorry – hopefully you haven’t been spending much time reviewing my ticket. I should have played more before I posted.

I found a good start:

• Created a “generate_after_header_content” hook in Elements
• Used div’s with CSS Flex to create a button
• Tinkered with CSS to pull this element from it’s parent justify-content:center; by using position:absolute; align-self:flex-end;

Bonus – on desktop, the “button” gets covered by the Off Canvas Menu, so I don’t really have to use any JS to play with it. But, I’m sure I’m going to run into some other issues.

I won’t close this ticket in to give you a chance to reply – but also didn’t want to waste your time. Thank you!

[Ying]

Glad you’ve got it working!

Just keep us updated if you run into any issues in the future 🙂

[Author]

Posts