[Resolved] Add logo to top of off canvas panel

[Ian]

I would like to add my logo that’s used as site-logo in the top nav to the off canvas panel above the links. How would I do this?

[Elvin]

Hi Ian,

Can you provide a mockup image of how you want it to be laid out? To have a clearer idea for the CSS writeup (or PHP snippet if necessary)

[Ian]

Sure

[Ian]

Probably just add the logo down the bottom, like this.

[Elvin]

There are multiple ways of doing this but they all involve the use of generate_after_slideout_navigation hook.

If you simply want to use the logo assigned on the customizer settings, try this PHP snippet:

add_action('generate_after_slideout_navigation', 'generate_construct_logo' );

Or if you want to design how the logo is laid out, you can create a Block Element, add your logo image on an image block, design your layout, and then hook the Block element to generate_after_slideout_navigation.

[Ian]

I added this snippet

If you simply want to use the logo assigned on the customizer settings, try this PHP snippet:

Checked the off canvas menu and I can’t see it yet.

Do I have to assign in somehow in the customiser?

[Elvin]

It’s actually there, we just need to fix it with CSS.

Try this:

nav#generate-slideout-menu .site-logo{
    display: block !important;
}

nav#generate-slideout-menu .site-logo img {
    width: 100%;
    height: auto;
}

[Ian]

Excellent, thanks.

[Ian]

So is there any way of changing its size? It’s really small. Or do I have to use the other method of creating a block to do that?

[David]

Hi there,

change Elvins CSS for this:

nav#generate-slideout-menu .site-logo {
    display: block !important;
    padding: 10px;
}

nav#generate-slideout-menu .site-logo img {
    width: 250px;
    height: auto;
}

It adds some padding, and you set an explicit width to the img

[Ian]

Thanks David

[David]

You’re welcome

[Christoph]

I have the same problem. But i want the logo before the Navigation.
?

[David]

Hi there,

try using this PHP Snippet:

add_action('generate_before_slideout_navigation', 'generate_construct_logo' );

[Matthias]

Or if you want to design how the logo is laid out, you can create a Block Element, add your logo image on an image block, design your layout, and then hook the Block element to generate_after_slideout_navigation.

I’m trying the same – adding a logo (as home button) to the off canvas menu. An Element seems to be the easiest way to me (unless you would say it slows the page more then another solution).
So i tried to create an element, block type with hook, added a gb container with background image and show on whole page.
The “generate_after_slideout_navigation” hook doesnt seem to exist though. “after_slideout_navigation” is there – but so far i couldnt get this to show my element.

Has this solution changed?

[Author]

Posts