[Resolved] Customize Off canvas panel

[Javier]

Hello,

I’m developing a site with GeneratePress and a must in the design is have an overlay menu with Off canvas with specific content, and I don’t know if its possible to achieve that as you can see in this picture. The basic points are:

– Add site logo on the top left
– On big screens move the Off Canvas Panel widget to the right of the menu options.
– Change the background of the Off Canvas Panel depending ion the menu option where you hover.

Will appreciate any help.

Regards

[David]

Hi there,

1.The logo
Use a Hook element to add this PHP to the inside_slideout_navigation hook:

<?php generate_construct_logo(); ?>

2. If you want to setup the site with menu and widget in place and share a link, ill see what CSS is required.

3. Not sure what you mean – so if the User hovers over a menu item – you want the entire background to change color ?

[Javier]

Hi David, thanks for your answer,

1. I have made this but it appears under the slideout-widget.

2. In private info I shared a demo site with menu, widget and logo in the Off canvas panel.

3. I wanted to change background using a different image by the menu element where you make hover. Here you can see in this video, finally I achieved with css + js.

[David]

Can you check the Hook is the inside_slideout_navigation not the after_slideout_navigation

[Javier]

Yes, my fault, the logo was on the after_slideout_navigation hook i have changed to inside_slideout_navigation hook.

[David]

This is the basic CSS you require to position the logo and make the Menu and Widget align in a row:

.slideout-navigation.do-overlay .inside-navigation {
	max-width: 100%;
	flex-direction: row;
}
.slideout-navigation.do-overlay .inside-navigation .site-logo {
	position: absolute;
	top: 0;
	left: 0;
}

[Javier]

Thanks, it works. I only have to adjust css for devices.

[David]

Do you need a hand with that ? If so, what specific changes do you want to make?

[Author]

Posts