Adding to the bottom of the off canvas menu

Hi there,

What are you trying to add?

Can you try the widget area first?
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

If that doesn't help please link us to the page in question.

It might just need a little bit of CSS to tweak the order.

Let me know :)

I'm actually trying to add social media icons. How were the icons added in the example on this page? The icons at the bottom look close to what I'm looking for.

https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

I hadn't seen the widget area, but that still appears to be adding to the top.

Hi Greg,

The example page installed the Lightweight Social Icons plugin, which generates a widget that can be dragged into off-canvas panel.
https://www.screencast.com/t/KjRrWw5Y

I see you already using Generateblocks on your site, in that case, you won't need to install an extra plugin but use GB in a block element.

You can refer to this demo video which adds social icons to the top bar using GB.
https://youtu.be/yAleVWQi5EA

In your case, after adding the social icons, set the Element type to hook, choose after_slideout_navigation as hook, choose entire site as location.
https://www.screencast.com/t/AhC4C9zx6

Hope that's helpful.

I'll take a look at that. I had a look at the hooks to see what was available. That hook isn't on the https://docs.generatepress.com/collection/hooks/ page.

Hi Greg,

The hook list on the documentation page isn't 100% complete. We're working on completing/updating them.

after_slideout_navigation actual hook name in the file is generate_after_slideout_navigation incase you want to hook things manually.

What I have.
https://cln.sh/S2k8ID

If I take out all my formatting I have this.
https://cln.sh/VK37fJ

My relevant CSS, I believe.

.slideout-navigation button.slideout-exit {
	text-align: right;
}
.slideout-navigation button.slideout-exit .gp-icon svg {
	height: 1.5em;
	width: 1.5em;
}
.slideout-navigation.main-navigation .main-nav ul li a {
	font-family: 'ABC Whyte Inktrap Light';
	font-size: 56px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 10px;
}
.slideout-navigation.main-navigation .main-nav .current_page_item a::before {
	content: "\2022";
	display: inline;
	padding-right: 10px;
	font-size: 0.9em;
	vertical-align: middle;
}

.site-logo.mobile-header-logo img {
	padding: 0;
	height: 26px;
}
.slideout-navigation .custom-logo-link {
	position: absolute;
	padding-left: 30px;
}
.slideout-navigation.main-navigation .inside-navigation .custom-logo {
	height: 32px;
	width: auto;
}
.slideout-navigation.main-navigation .inside-navigation {
	padding-top: 30px;
}
.slideout-navigation:not(.do-overlay) .main-nav {
	position: fixed;
	bottom: 0;
}

"Tunnel 4b64bb2ab87b.ngrok.io not found"

I believe the link expired.

Can you create mock-up image of how you want things to look like? It'll give us a better idea on which approach to advice.

Note: If you want to hook a div element on top of the off-canvas menu, use generate_inside_slideout_navigation instead.

generate_after_slideout_navigation comes after the slideout menu. generate_inside_slideout_navigation comes before the slideout menu. The off-canvas menu itself is baked between these 2 hooks. :)

My laptop went to sleep. Tunnel is back working and will be open.

This is what I'm aiming for (company logo pixelated at top).

https://cln.sh/gJnGm2

Ah that can be done with custom CSS.

But I suggest wrapping the Logo and the icon into 1 div wrapper to make it conducive to proper layout styling.

Can you take out all the custom CSS you've added and let us recheck?

If I take out all my formatting I have this.
https://cln.sh/VK37fJ

This one is already close enough to what you're aiming for. We basically just have to make the close button positioned absolute to the right instead of making all the other elements position: fixed;

"Wrapping the logo and icon into 1 div wrapper"? The close icon and the logo? Not sure how to do that.

I've removed my styling.

Hi there,

whatever you have setup so far - leave it as is, then add this CSS:

.slideout-navigation .slideout-exit.has-svg-icon {
    width: auto;
}
.slideout-navigation .custom-logo-link {
    order: -1;
    padding-left: 30px;
}

.slideout-navigation .inside-navigation {
    height: 100%;
}

.slideout-navigation .inside-navigation .main-nav {
    margin-top: auto;
    margin-bottom: 0px;
}

Is it possible to link an element to more than one hook?

I'd like to display the same group of social icons in the footer. Can I add this element I've created for the off canvas menu to a widget area?

Thank you David, that is almost there. If I want to move the social icons to be 40px above the bottom of the screen and the large links to be 60px above the social icons, what would be the best way to go about that?

I made a slight change to the CSS here

Simply changing the margin-bottom: 10px; to margin-bottom: 0px; to reduce the space between menu and social icons.
Now edit the Element with your social icons, select the container block and set the top and bottom padding to 0 leave the left and right values.

WordPress doesn't support blocks inside widgets yet. And you can't hook them into a widget area either.
Instead you would need to use a Block Element to build out your Footer.

Theres a YT video showing how to build a footer with the block element:
https://www.youtube.com/watch?v=w6rX3f9BX7c