Archived topic
Slide in menu that moves whole site to the left
7 replies · Started by Lucy on January 12, 2020
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
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.
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
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.
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
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;
}Fantastic - thank you so much for your amazing support. That is exactly what I needed.
Best wishes
Lucy
Awesome - glad to be of help :)
