Off Canvas Panel social media icons side-by-side

Hi Raielene,

You can activate the off-canvas menu through Appearance > Customize > Layout > Off Canvas Panel.

See: https://share.getcloudapp.com/NQuxQbYA

You can add widgets through Appearance > Customize > Widgets > Off Canvas Panel.

See: https://share.getcloudapp.com/P8u6Ag8E

Or Appearance > Widgets.

See: https://share.getcloudapp.com/d5uNKY69

You can also add Blocks through a Block Element hooked to inside_slideout_navigation.

See: https://share.getcloudapp.com/NQuxQblg

Hope this helps! :)

Ok, I can do that, but if I put them in with HTML they float up near the top. If I use the Social Icons block, they're above the menu I'd added before. If I add a menu through the same Element, the icons appear beside the menu. How do I get them to show up below the menu? How do I get blocks to appear below the one before?

By default here is how it behaves on my test website when I add a widget inside the Off Canvas Panel: https://share.getcloudapp.com/llu6GzED

Also see: https://share.getcloudapp.com/4guZg5Ze

Can you provide a link as well to the site in question where this issue is occurring?

Hope to hear from you soon! :)

The site isn't live yet. I'll include login below. You'll be able to see the site once logged in.

I see. Here is a CSS you can try adding:

.inside-navigation.grid-container.grid-parent {
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/

Kindly let us know how it goes. :)

Hi! Still struggling with this. Can you help me again?

I put the widget into the Off Canvas Panel and now I have two icons at the top (where I don't want them) and also two side by side under the menu (which is what I want). But that last one doesn't show up on mobile. How can I remove the top two icons and also get the bottom ones to show up on mobile?

Hi Raielene,

The other social icons is added through Appearance > Widgets > Off Canvas Panel. The other one seems to be added through a Block Element.

Alter this code:

.inside-navigation.grid-container.grid-parent {
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
}

Into:

#generate-slideout-menu .inside-navigation.grid-container.grid-parent {
    justify-content: center;
}

Then, disabled/delete the Block Element you have. Go to Appearance > Widgets > Off Canvas Panel and fix the alignment of the Social icons. If you have GenerateBlocks, it would be better to use a Buttons Block as the social icon instead.

Hope this clarifies!

Very close now! The two icons just need to be side-by-side instead of one after the other.

I have GenerateBlocks... can you tell me how to use a Buttons Block instead?

Great! Here’s a video with regards to adding Social Icons through GenerateBlocks: https://youtu.be/yAleVWQi5EA?t=100

Hope this helps!

Oh! That's it! Thank you so much for your help!! 😊

You’re welcome Raielene!