Off Canvas Panel Logo On Mobile

[Dung]

Hi GP Team,
I activated the off canvas panel on mobile, is there anyway to have logo on top center of the canvas panel? (click the logo will link to homepage)
Hope to have your support. Thank you very much.

[Tom]

Hi there,

You could add this PHP:

add_action( 'generate_inside_slideout_navigation', function() {
    ?>
        <div class="off-canvas-logo">
            <a href="URL TO YOUR SITE"><img src="URL TO YOUR LOGO" alt="" /></a>
        </div>
    <?php
} );

Then you could use this CSS:

.off-canvas-logo {
    text-align: center;
    margin-bottom: 15px;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dung]

Hi Tom,
I just did it. The logo is not shown, there are blank but you can click. When you click, it does not link to homepage. You can check it on my site.

[Tom]

You need to replace URL TO YOUR SITE with the actual URL to your site, and URL TO YOUR LOGO to the URL of your logo.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dung]

Hi Tom,
Well my bad, how can I get my logo URL?

[Tom]

Right-click your logo and click “Copy image address” (or something like that, depending on your browser).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dung]

Hi Tom,
Very nice, it worked. Can we adjust the logo size, also the top, left and right margin?

[Tom]

Yep, just adjust the CSS:

.off-canvas-logo {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.off-canvas-logo img {
    max-width: 200px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dung]

Hi Tom,
So nice, thank you so much. I am really appreciated for your help.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dung]

Hi GP Team,
Can I have the code for the text transform of submenu on the off canvas panel please.
Hope for helping. Thank you so much.

[Leo]

This should do on mobile:

@media (max-width: 768px) {
    .slideout-navigation.main-navigation .main-nav ul ul li a {
        text-transform: uppercase;
    }
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dung]

Hi Leo,
It worked very nice. Thank you so much.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts