[Resolved] Customize Off canvas panel

Home Forums Support Customize Off canvas panel

  • This topic has 7 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1453397
    colillasb

    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

    #1453538
    David
    Staff
    Customer Support

    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 ?

    #1453800
    colillasb

    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.

    #1453838
    David
    Staff
    Customer Support

    Can you check the Hook is the inside_slideout_navigation not the after_slideout_navigation

    #1453974
    colillasb

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

    #1454007
    David
    Staff
    Customer Support

    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;
    }
    #1455170
    colillasb

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

    #1455243
    David
    Staff
    Customer Support

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.