Split Screen Website + overlay interfering with each other
-
Hi, i'm using split-screen on certain pages on my website and they work great untill i make an element have an overlay link. When i make a button or text have a link to an overlay page the page is allways open on that specific page. For example, i have a page called .page-id-399 which has split screen. On this page i also want a menu to open when pressing a button (an overlay page) - but when i make this button have a overlay link the page 399 has the overlay open at all times and i am unable to close it. Is there a solution to this?
Here's my code for that page.
.page-id-399 .lay-content #grid, .page-id-399 #footer-region { height: 100%; position: fixed; top: 0; overflow-y: scroll; overflow: -moz-scrollbars-none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .page-id-399 #footer-region { left: 0; width: 10%; } .page-id-399 #footer { box-sizing: border-box; min-height: 100%; } .page-id-399 .lay-content #grid { right: 0; width: 90%; box-sizing: border-box; } .page-id-399 ::-webkit-scrollbar { display: none; } #footer-region { border-right: 1px solid #ccc; }Thank you in advance,
Axel -
hey axel
after i released the overlay feature i had to change the example code for the splitscreen layout:
https://laytheme.com/tutorials/create-a-splitscreen-website.html
so you need to make sure that you use
body>.lay-contentinstead of .lay-content
so your code should be:
body.page-id-399 > .lay-content #grid { right: 0; width: 90%; box-sizing: border-box; }the > sign means direct child of the previous selector
this makes sure only the .lay-content div of your page, not of any overlays is styledthe #footer-region css, you can keep it like this because overlays don't contain footers
-
hey axel
after i released the overlay feature i had to change the example code for the splitscreen layout:
https://laytheme.com/tutorials/create-a-splitscreen-website.html
so you need to make sure that you use
body>.lay-contentinstead of .lay-content
so your code should be:
body.page-id-399 > .lay-content #grid { right: 0; width: 90%; box-sizing: border-box; }the > sign means direct child of the previous selector
this makes sure only the .lay-content div of your page, not of any overlays is styledthe #footer-region css, you can keep it like this because overlays don't contain footers
Thank you very much and thanks for the fantastic theme. It's very nice to work with.
Have a nice sunday!
Axel -
aha thanks a lot!! u too
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login