Archived topic

Logo and styling in Off Canvas menu overlay

7 replies · Started by nomadiceman on July 12, 2021

Viewing posts 1–8 of 8

July 12, 2021 at 4:52 am #1852654

I’ve read and attempted to follow previous similar questions but having no luck

I’ve managed to do some simple styling but need help getting the logo in there

I’d basically like a SVG logo at the top of the menu on mobile. The off canvas panel. I tried the hook element but didn’t work.

It’s set to overlay and I think they could be causing my confusion. But unsure how to do it

Thanks in advance for your help

July 12, 2021 at 5:37 am #1852683

Hi there,

simplest method would be to use a Block Element:

https://docs.generatepress.com/article/block-element-overview/

Add an Image Block for your logo.
Set the Hook to: inside_slideout_navigation
And set the Display Rules to the entire site.

That should position it above the menu. May require a little CSS to align/size. Happy to help with that once i can see the logo in place.

July 12, 2021 at 5:43 am #1852696

Hi David,

I saw your recommendation in another question and tried what you said. But nothing happened. No logo appeared

Maybe I did something wrong. I’ll try again with what you said and let you know when I’ve done.

Thanks for your help once again

July 12, 2021 at 7:08 am #1852784

Make sure the Display Rule location is set - if its still an issue then let us know.

July 13, 2021 at 1:17 am #1853714

Hi David, great the logo is now showing.

I disabled all caching so it seems as that was the initial problem.

How would I go about making that logo smaller now?

Would it be difficult to make the off canvas logo to be positioned at the same spot as the website logo?

Thanks for your help

July 13, 2021 at 4:22 am #1853873

Try adding this CSS:

#generate-slideout-menu .inside-navigation {
    padding: 20px !important;
    flex-direction: row;
}
#generate-slideout-menu .inside-navigation .wp-block-image {
    order: -1;
    max-width: 150px;
}

#generate-slideout-menu .inside-navigation .slideout-exit {
    padding: 0 25px 20px;
}
.slideout-navigation.do-overlay .inside-navigation .main-nav {
    width: 100%;
}

July 13, 2021 at 4:36 am #1853887

Wow awesome David. Works great.

Thank you very much for your help

July 13, 2021 at 5:54 am #1853968

Glad to be of help!

This archived topic is closed to new replies.

Start building better websites today.