[Resolved] Slide in menu that moves whole site to the left

Home Forums Support Slide in menu that moves whole site to the left

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

    Hi there

    I have a client who is designing a site that I am going to implement, hopefully using GeneratePress and Elementor. They have got in touch to check whether a specific design element will be possible so I wanted to ask what you think.

    The feature is like this site where the menu slides in from the right while sliding the current screen content to the left:

    https://wepresent.wetransfer.com/story/alice-mann-matric-ball-portraits/

    Do you think this will be possible with GeneratePress Premium?

    I’ve started having a go using the mobile menu across all screen sizes and the off canvas panel here.

    https://playground.websitesbylucy.co.uk/

    Am I on the right track?

    Two initial questions:

    1. Why does the logo and menu icon only show once you start scrolling down? Is that a z-index issue because I’ve set the top Elementor section to sit behind the GeneratePress bar at the top?

    2. Do you think it will be possible to get the same effect as the example site where all the content shifts to the left?

    Many thanks,
    Lucy

    #1129573
    David
    Staff
    Customer Support

    Hi there,

    instead of messing with Margins and Z-index in Elementor use the GP Header Element:

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

    You can create one that is just set to Merge with Content.

    The slide content across is a little more tricky but i am sure its possible ( in fact i ams sure i gave the solution before but i can’t find it lol ) – if you set up the Off Canvas Panel and the Merged Header ill take a look at the code required.

    #1129745
    Lucy

    Hi David

    Thank you very much for your input. I wasn’t aware of the GP Header Elements – I’m quite new to GP – so that’s useful info. However, in this case the hero image is just one example and I will want the nav bar behaviour the same on each page – not sure what those pages will look like as yet – so I think I need to keep the flexibility of using Elementor for the top section (unless I’m misunderstanding).

    My sample page at https://playground.websitesbylucy.co.uk/ is using the Off Canvas Panel at the moment so is that enough for you to look at?

    Best wishes
    Lucy

    #1129763
    David
    Staff
    Customer Support

    These are the steps i would follow to create that Header/Hero layout:

    1. Customizer > Layout > Header – Enable Navigation as Header and Mobile Header.

    2. Dashboard > Appearance > Elements -> New Header Element.
    Go straight to the Site Header Tab and enable Merge with Content.
    Go to Display Rules Tab and set the Location to Entire Site.

    3. Create a new Menu and assign that to the Off Canvas Menu.

    4. Create another new Menu but DO NOT add any menu items and assign this to the Primary Navigation – this will make it so only the Off Canvas Menu Toggle is displayed.

    Once thats done ill take a look at the sliding content.

    #1129871
    Lucy

    Hi David

    Ahh, I see what you mean now! Thank you. I’ve done those steps so now the header bar looks right.

    Now for the sliding content.

    Thank you so much for your help,
    Best wishes
    Lucy

    #1130396
    David
    Staff
    Customer Support

    Add this CSS to Slide the content over:

    .site {
        -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
        -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
        -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
        transition: transform .2s cubic-bezier(.16, .68, .43, .99);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
    
    .slide-opened .site {
        -webkit-transform: translate3d(-265px, 0, 0);
        -moz-transform: translate3d(-265px, 0, 0);
        -ms-transform: translate3d(-265px, 0, 0);
        -o-transform: translate3d(-265px, 0, 0);
        transform: translate3d(-265px, 0, 0);
    }

    And if you want to change the background of the Overlay then try this CSS:

    .slideout-overlay {
        background-color: rgba(0,0,0,0.2) !important;
    }
    #1130418
    Lucy

    Fantastic – thank you so much for your amazing support. That is exactly what I needed.

    Best wishes
    Lucy

    #1130459
    David
    Staff
    Customer Support

    Awesome – glad to be of help 🙂

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