bug / Overlay Menu & splitscreen site

[nine]

Hello,

I have a problem with the overlay menu and our split screen page. The menu should only cover the left half of the page.

If I am on the start page, then the menu covers the left half as desired. However, some of the browser height is taken away at the bottom (as if the page had a footer?).

However, if I am in the project view, the menu view is halved again vertically.

Here are a few screenshots (I have colored the background light gray for clarity).

How can I fix this?

[panteley]

This post is deleted!

[arminunruh]

make sure to use the latest css code for the splitscreen:
https://laytheme.com/tutorials/create-a-splitscreen-website.html#use-custom-css

i updated that css because it wasn't compatible with overlays

However, some of the browser height is taken away at the bottom

Make sure your overlays uses a browser height row row? so it fills the whole screen
or like use 2 rows and use custom browser heights that will both make the layout 100vh

dont forget to set frame top and bottom to 0 and rowgutter to 0 if u want to go that way

[panteley]

This post is deleted!

[nine]

Our site uses the split screen for the main page and the project view. The other pages use the regular screen width. Our freelancer had found a good solution for this when creating the site and integrated the IDs of the pages into the old splitscreen CSS. I tried to adapt this solution to the new CSS, , but unfortunately the overlay menu does not open at all in the project view: Site

Maybe you could take a look at it?

/* using "body>.lay-content #grid" instead of "#grid" for compatibility with "Overlay Feature" */
    body>.lay-content #grid .home, .type-project #grid, .id-6 #footer-region, .id-425 #footer-region, .type-project #footer-region {
        height: 100%;
        position: fixed;
        top: 0;
        overflow-y: scroll;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .id-6 #footer-region, .id-425 #footer-region, .type-project #footer-region {
        left: 0;
        width: 50%;
    }
    #footer{
        box-sizing: border-box;
        min-height: 100%;
    }
    body>.lay-content #grid .home, .type-project #grid{
        right: 0;
        width: 50%;
    }
    body>.lay-content  #grid .home, .type-project #grid{
        box-sizing: border-box;
    }
    ::-webkit-scrollbar {
        display: none;
    }

#footer-region {
        border-right: 1px solid #ccc;
    }

I was able to adjust the height of the menu with your instructions, thanks!

[arminunruh]

are u sure you did all of these steps? on the right in the cyan box:

if you remove your splitscreen css does your overlay work then?

body>.lay-content #grid .home

i think this css is wrong, i might be wrong

can you ask your freelancer to adapt your css for you? im super busy atm

can you remove your splitscreen css, do all the steps in the box.
then if overlay still doesn't work:

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

[jacobtegel]

got it to work, following this selection of the grid

body > .lay-content #grid

i applied the same structure to selecting the project grids, since not every page should be splitscreen, only projects

.type-project > .lay-content #grid

and you’re right .home was not necessary (anymore).

[arminunruh]

ah nice, well done!