- This topic has 7 replies, 2 voices, and was last updated 5 years, 7 months ago by
.
-
Posts
-
Thank you for an awesome product.
How to implement passepartout like TwentySixteen theme ?
Thanks,
Jacob
Customer Support
Hi there,
try this CSS:
@media(min-width: 769px) { body { margin: 21px; } body:before, body:after { background: inherit; content: ""; display: block; height: 21px; left: 0; position: fixed; width: 100%; z-index: 99; } body:before { top: 0; } body:after { bottom: 0; } }Wonderful. Except I have “Use navigation as header” turned on and “Sticky navigation” turned on also with no transition. When scrolling down this means the header-as-navigation jumps into full-screen-width and does not respect the passepartout. Is there something you can do ?
Not sure if there is a fix for that – can you link me to the site so i can see the issue ?
Edit your original topic and use the Site URL field to share a link privately.Thank you, David.
Sorry for the late reply.
So. I managed to get a sticky header by the standard customization option. I also managed to get a sticky footer by adding an after_footer-hook with an element in it – https://generatepress.com/forums/topic/how-do-i-create-a-sticky-footer-bar/
Now, in order to achieve what I am going for I need to add a 4px border in both sides of the page. Top and bottom is taken care of. So how do we do this ? Is page background-color and body padding the way to go ? Or what would you do ?
Thank you.
Could you provide a login to the site so i can get past the maintenance mode – i only need to see the Front End.
Maintenance off.
Try this CSS instead:
body { margin: 40px; } body:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: 40px solid #000; pointer-events: none; } .sticky-enabled .main-navigation.is_stuck, .sticky-enabled #mobile-header.main-navigation.is_stuck { margin: 0 40px; top: 40px !important; width: calc(100% - 80px) !important; }
- You must be logged in to reply to this topic.
