Customize Off canvas panel

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 ?

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.

Can you check the Hook is the inside_slideout_navigation not the after_slideout_navigation

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

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;
}

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

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